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方法 ; 第 25 章 通过 两 个 项 目 实战 案例 综合 本 书 介 绍 的 所 有 内 容 ， 实 战 演练 HTML5 和 CSS3 的 使 
用 方法 。 
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HTML5 + CSS3 学 习 准 备 


HTML5 和 CSS3 是 新 一 代 Web 技术 的 标准 , 致力 于 构建 一 套 更 加 强大 的 Web 应 用 开发 平台 ， 
以 便 提高 Web 应 用 开发 效率 ， 丰 富 Web 体验 效果 。 由 于 其 广阔 的 发 展 前 景 ， 因 此 目前 各 主流 浏览 
器 都 已 经 能 更 好 地 支持 HIMLS。 本 章 主要 介绍 在 学 习 HIML5 和 CSS3 之 前 ， 需 要 做 的 一 些 准备 
工作 ， 以 及 HTMLS 的 一 些 新 标准 。 


1.1 学 习 准备 


工 欲 善 其 事 必 先 利 其 器 。Web 应 用 需要 浏览 器 作为 载体 ， 目 前 可 供 选择 的 浏览 器 类 型 非常 多 ， 
选择 一 款 合适 的 浏览 器 ， 对 于 体验 HIML5 的 效果 将 会 有 很 大 的 帮助 。 另外， 选择 一 款 得 心 应 手 的 
开发 工具 ， 也 能 够 更 好 地 掌握 HTML5 的 开发 技巧 ， 提 高 开发 效果 。 


1.1.1 选择 合适 的 浏览 器 


正 浏览 器 应 该 是 大 家 最 熟悉 的 一 款 浏览 器 ， 它 伴随 着 Windows 的 成 长 也 在 不 断 地 更 新 换代 ， 
除了 正 浏览 器 以 外 ， 我 们 可 能 还 听 说 或 使 用 过 Google Chrome 浏览 器 、Mozilla Firefox 浏览 器 、 
Opera 浏览 器 、Maxthon 浏览 器 、 百 度 浏 览 器 、QQ 浏览 器 等 ， 这 么 多 的 浏览 器 ， 到 底 哪 一 款 适 合 
我 们 学 习 HIMLS 呢 ? 笔者 认为 ， 各 款 浏 览 器 都 有 自己 的 优点 和 缺点 ， 我 们 选择 的 依据 是 哪 款 浏览 
器 对 HIML5 和 CSS3 支持 的 更 好 ， 我 们 就 选择 哪 款 。 根 据 笔者 的 经 验 和 目前 浏览 器 的 版 本 ， 建 议 
大 家 选择 正 11 或 Google Chrome 30 以 上 版 本 , 本 书 将 以 Google Chrome 30 为 大 家 呈现 HIMLS 的 
各 种 效果 。 
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1.1.2 ”选择 合适 的 开发 工具 


对 于 简单 的 HTML 网 页 ， 使 用 记事 本 就 可 以 完成 页 面 布局 和 显示 ， 对 于 稍 复杂 的 一 些 HIML 
网 页 ， 使 用 Notepad 或 Editplus 也 可 以 满足 需要 ， 但 是 对 于 稍 大 一 些 的 Web 项 目 而 言 ， 使 用 这 些 
工具 就 好 比 钻 木 取 火 ， 虽 然 通过 精湛 的 技术 和 细致 的 编码 也 能 完成 任务 ， 但 是 效率 却 非常 低 。 

IDE (Integrated Development Environment) 集成 开发 环境 是 专业 的 软件 项 目 开发 工具 ， 根 据 开 
发 语言 的 不 同 , IDE 开发 工具 也 有 很 多 种 。 对 于 HTMLS5 而 言 , 可 供 选择 的 开发 工具 有 Adobe Edge、 
Adobe Dreamweaver CC、Adobe ColdFusion 10、Sencha Architect 2、Sencha Touch 2、 Aojo Foundation 
Maqetta、Visual Studio 2010、JetBrains WebStorm 4.0、Google Web Toolkit 等 ， 这 些 开发 工具 都 臻 
力 于 为 用 户 提供 方便 、 快 捷 的 开发 模式 ， 提 高 工作 效率 。 本 书 将 以 Adobe Dreamweaver CC 为 开发 
工具 ， 详 细 讲解 HTMLS5 的 知识 。 


1.2 认识 HTML5 


伴随 着 硬件 和 网 络 宽带 的 大 幅 改 善 ， 互 联网 未 来 的 发 展 方向 ， 注 定 要 适应 人 们 日 益 强烈 的 用 
户 体 验 。HTMLS5 作为 唯一 一 个 能 够 在 PC、MAC 、iPhone、iPad、Android、Windows Phone 等 平 
台 运行 的 语言 ， 注 定 将 成 为 移动 互联 网 时 代 的 HTML 标准 。 
1.2.1 HTML5 语法 

HTML5 与 HIML4 在 语法 上 有 很 多 相似 之 处 ， 但 还 有 很 多 关键 的 地 方 不 太一 样 ， 下 面 我 们 就 
来 看 一 下 HTML5 和 HTML4 在 语法 上 的 不 同 之 处 。 

1. 字符 编码 

字符 编码 用 于 指定 一 个 HTML 文档 使 用 的 是 哪 种 字符 集 ， 以 便 告诉 浏览 器 应 该 使 用 哪 种 编码 
对 文本 进行 存储 或 通过 通信 网 络 进行 传递 。 在 HTML 文档 中 ， 使 用 <meta> 元 素 指定 字符 编码 。 在 
HIML4 中 ， 其 形式 如 下 : 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

而 在 HIML5 中 ， 直 接 使 用 charset 属性 即 可 指定 字符 编码 ， 其 形式 如 下 : 

<meta charset="utf-8"> 

2. Doctype 文档 类 型 


DOCTYPE 文档 类 型 是 一 种 标准 通用 标记 语言 的 文档 类 型 声明 ， 在 HTML 文档 中 ， 用 于 高 速 
浏览 器 应 该 使 用 哪 种 文档 类 型 来 解析 HIML 文档 。 

在 HIML4 中 ，DOCTYPE 文档 类 型 的 语法 如 下 : 

<!DOCTYPE HIML PUBLIC "-//W3C//DTD HIML4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
0020loose.dtd"> 
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在 HTML5 中 ，DOCTYPE 文档 类 型 的 语法 如 下 : 

<!doctype html> 

3. MathML 与 SVG 

MathML 称 为 数学 置 标语 言 , 是 一 种 基于 XML 的 标准 , 用 于 在 互联 网 上 书写 数学 符号 和 公式 。 


SVG 称 为 可 缩放 矢量 图 形 , 同样 基于 XML 标准 , 是 一 种 用 于 表示 二 维 矢量 图 形 的 格式 . 在 HIML4 
中 ， 需 要 使 用 特定 的 标签 来 显示 MathML 和 SVG， 如 <embed><object> 或 <iframe>, 但 在 HIML5 
中 , 可 以 将 MathML 和 SVG 内 嵌 在 HTML 文档 中 ， 完 成 相同 功能 。 例 如 , 在 HIMLS 中 使 用 SVG 


元 素 绘制 圆 的 代码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<title>1.2.1</title> 
</head> 
<body> 

<svg> <circle r="80" cx="100" cy="100" fill="blue"/> </svg> 
</body> 

</html> 

效果 如 下 图 所 示 。 
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1.2.2 ”新 增 与 废除 的 元 素 和 属性 


在 HIML5 中 , 不 但 新 增 了 很 多 元 素 和 属性 ， 而 且 还 废除 了 很 多 元 素 和 属性 。 下 面 我 们 就 来 详 


细 介 绍 一 下 这 些 更 新 换代 的 元 素 和 属性 。 


中 


1. 新 增 的 与 结构 相关 的 元 素 


在 HTML4 中 ,与 结构 相关 的 元 素 主要 使 用 <div>, 并 配合 CSS 样式 进行 页 面 布局 , 而 在 HTML5 
可 以 直接 使 用 各 种 主体 结构 元 素 进行 布局 。 这 些 元 素 包括 : 

@ ”<section> 元 素 : 表示 页 面 的 一 个 内 容 区 块 。 

@ ”<article> 元 素 : 表示 页 面 的 一 块 独立 内 容 。 

@ <aside> 元 素 : 表示 页 面 上 <article> 元 素 之 外 的 但 与 <article> 相 关 的 辅助 信息 。 

@ “<nav> 元 素 : 表示 页 面 中 导航 链接 的 部 分 。 
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在 HIML5 中 ， 还 新 增 的 一 些 非 主体 结构 元 素 。 

<header> 元 素 : 表示 页 面 中 一 个 内 容 区 块 <section> 或 整个 页 面 的 标题 。 

。 <hgroup> 元 素 : 表示 对 于 整个 页 面 或 页 面 一 个 内 容 区 块 <section> 的 <header> 进 行 组 合 。 
@ ”<footer> 元 素 : 表示 对 整个 页 面 或 页 面 一 个 内 容 区 块 <session> 的 页 脚 。 

@ <figure> 元 素 : 表示 一 段 独 立 的 文档 内 容 。 

ee <figcaption> 元 素 : 表示 <figure> 元 素 的 标题 。 

2. 新 增 的 与 结构 无 关 的 元 素 

这 些 元 素 主 要 用 于 定义 音 / 视 频 、 进 度 条 、 时 间 、 注 释 等 。 

@ <video> 元 素 : 用 于 定义 视频 ， 无 须 <object type="video/ogg">。 

@ <audio> 元 素 : 用 于 定义 音频 , 无 须 <object type="application/ogg">。 
e <embed> 元 素 : 用 于 插入 各 种 多 媒体 ， 可 以 各 种 格式 。 

e <mark> 元 素 :用 于 向 用 户 在 视觉 上 突出 显示 某 些 文字 。 

@ ”<progress> 元 素 : 表示 运行 中 的 进程 。 

日 <time> 元 素 : 用 于 表示 日 期 、 时 间 。 

@ ”<ruby> 元 素 : 表示 ruby 注释 。 
. 

四 

. 

二 

. 
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<rt> 元 素 : 表示 字符 的 解释 或 发 音 。 

<rp> 元 素 : 在 <ruby> 内 使 用 ， 表 示 不 支持 <ruby> 元 素 的 浏览 器 所 显示 的 内 容 。 
<wbr> 元 素 : 表示 软 换行 ， 可 以 根据 浏览 器 的 窗口 或 父 级 元 素 的 宽度 自行 决定 。 
<canvas> 元 素 : 表示 画布 ， 然 后 让 脚本 把 想 画 的 东西 画 在 上 面 。 
<command> 元 素 : 表示 命令 按钮 。 

<details> 元 素 : 表示 当 用 户 单 击 某 元 素 时 候 想 要 得 到 的 细节 信息 ， 常 和 <summary> 元 素 联 
合 使 用 。 

<summary> 元 素 : 是 <details> 元 素 的 第 一 个 子 元 素 ， 表 示 <details> 的 标题 。 
<datalisf> 元 素 : 表明 了 可 以 选择 的 数据 列表 ， 以 下 拉 列表 形式 显示 。 
<datagrid> 元 素 : 表明 了 可 以 选择 的 数据 列表 ， 以 树 列表 的 形式 显示 。 
<keygen> 元 素 : 表示 生成 密 钥 。 

<output> 元 素 : 表示 不 同类 型 的 输出 。 

<source> 元 素 : 表示 为 <video><audio> 等 媒体 元 素 定义 资源 。 

<menu> 元 素 : 表示 菜单 列表 。 


3. 新 增 的 表单 元 素 类 型 

e@ <email>: 表示 必须 输入 Email 地 址 的 文本 输入 框 。 

@ <url>: 表示 必须 输入 url 地 址 的 文本 输入 框 。 

e@ <number>: 表示 必须 输入 数值 的 文本 输入 框 。 

@ <range>: 表示 必须 输入 一 定 范围 内 数字 的 文本 输入 框 。 
4. 新 增 的 表单 相关 属性 


下 表 列 出 了 与 表单 相关 的 属性 。 
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属 性 作用 域 说 明 

autofocus input (type=text)、select、 | 以 指定 属性 的 方式 让 元 素 在 画面 打开 时 自动 获得 焦点 
textarea、button 

placeholder input (type=text)、textarea ”| 对 用 户 的 输入 进行 提示 ， 提 示 用 户 可 以 输入 的 内 容 

form input、output、 select、textarea、| 声明 属于 哪个 表单 ， 然 后 将 其 放置 在 页 面 的 任何 位 置 ， 而 
button、fieldset 不 是 表单 之 内 

Tequired input (type=text)、textarea ”| 表示 用 户 提交 时 进行 检查 ,检查 该 元 素 内 必定 要 有 输入 内 容 

autocomplete “| input 规定 表单 是 否 应 该 启用 自动 完成 功能 

min input 规定 输入 字段 的 最 小 数字 

max input 规定 输入 字段 的 最 大 数字 

multiple input 允许 上 传 时 一 次 上 传 多 个 文件 

pattern input 用 于 验证 输入 字段 的 模式 ， 即 正则 表达 式 

step input 规定 输入 字段 的 合法 数字 间隔 

list datalist、input 定义 选项 列表 ， 与 input 配合 使 用 

disabled fieldset 把 它 的 子 元 素 设 为 disabled 状态 

novalidate input、button、form 取消 提交 时 进行 的 有 关 检 查 ， 表 单 可 以 被 无 条 件 提交 

formaction input、button 覆盖 form 元 素 的 action 属性 

formenctype “| input、 button 覆盖 表单 的 enctype 属性 

formmethod input、button 覆盖 表单 的 method 属性 

formnovalidate | input、button 覆盖 表单 的 novalidate 属性 

formtarget input、button 覆盖 表单 的 target 属性 

5. 新 增 链接 相关 属性 


(1) 为 a、area 增加 media 属性 。 规 定 目标 URL 是 什么 类 型 的 媒介 /设备 进行 优化 的 。 该 属性 
用 于 规定 目标 URL 是 为 特殊 设备 〈 如 iPhone) 、 语 音 或 打印 媒介 设计 的 。 该 属性 可 接受 多 个 值 。 
只 能 在 href 属性 存在 时 使 用 。 

(2) 为 area 增加 herflang 和 rel 属性 。hreflang 属性 规定 在 被 链接 文档 中 的 文本 的 语言 。 只 有 
当 设 置 了 href 属性 时 ， 才 能 使 用 该 属性 。 注 释 : 该 属性 是 纯 咨 询 性 的 。rel 属性 规定 当前 文档 与 被 
链接 文档 /资源 之 间 的 关系 。 只 有 在 使 用 href 属性 时 ， 才 能 使 用 rel 属性 。 

(3) 为 link 增加 size 属性 。size 属性 规定 被 链接 资源 的 尺寸 。 只 有 当 被 链接 资源 是 图 标 时 
(rel="icon")， 才 能 使 用 该 属性 。 该 属性 可 接受 多 个 值 。 值 由 空格 分 隔 。 

(4) 为 base 元 素 增加 target 属性 ， 主 要 是 保持 与 a 元 素 的 一 致 性 。 


6. 新 增 的 其 他 属性 


(1) 为 ol 增加 reversed 属性 ， 指 定 列表 倒序 显示 。 

(2) 为 meta 增加 charset 属性 。 

(3) 为 menu 增加 type 和 label 属性 。label 为 菜单 定义 一 个 课件 的 标注 ，type 属性 可 以 以 上 
下 文 菜单 、 工 具 条 与 列表 cande 三 种 形式 出 现 。 

(4) 为 style 增加 scoped 属性 。 它 允许 我 们 为 文档 的 指定 部 分 定义 样式 ， 而 不 是 整个 文档 。 
如 果 使 用 "scoped" 属 性 ， 那 么 所 规定 的 样式 只 能 应 用 到 style 元 素 的 父 元 素 及 其 子 元 素 。 
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(5) Async 是 为 Script 脚本 新 增加 的 属性 ， 用 于 异步 执行 Script 脚本 。asyne 属性 仅 适用 于 外 
部 脚本 (只 有 在 使 用 src 属性 时 ) 有 多 种 执行 外 部 脚本 的 方法 : 


e@ 如 果 async="async"， 那 么 脚本 相对 于 页 面 的 其 余部 分 异步 执行 ( 当 页 面 继续 进行 解析 时 ， 
脚本 将 被 执行 )。 

@ 如 果 不 使 用 async 且 defer="defer"， 那 么 脚本 将 在 页 面 完 成 解析 时 执行 。 

@ 如果 既 不 使 用 async 也 不 使 用 defer: 在 浏览 器 继续 解析 页 面 之 前 ， 立 即 读 取 并 执行 脚本 。 


(6) 为 html 元 素 增加 manifest， 开 发 离线 Web 应 用 程序 时 与 API 结合 使 用 定义 一 个 URL， 
在 这 个 URL 上 描述 文档 的 缓存 信息 。 
(7) 为 过 ame 增加 三 个 属性 : sandbox、seamless 和 srcdoc。 用 来 提高 页 面 安全 性 ， 防 止 不 信 

任 的 Web 页 面 执行 某 些 操作 。 

7. 废除 了 能 使 用 CSS 样式 替代 的 元 素 

在 HTML4 中 有 许多 元 素 用 于 美化 页 面 ， 而 在 HTML5 中 ， 这 些 美化 页 面 的 功能 将 由 CSS 完 
成 ， 所 以 这 些 元 素 就 被 废除 了 。 这 些 元 素 包括 basefont、big、center、font、s、strike、tt、u 等 。 

8. 废除 了 frame 框架 元 素 

由 于 框架 元 素 的 使 用 对 网 页 可 用 性 和 服务 器 响应 请 求 次数 上 存在 负面 消耗 , 因此 HTMLS5 中 废 
除了 frame 框架 元 素 ,包括 fameset、frame、noframes， 目 前 HIMLS 只 支持 frame 元 素 。 实 际 上 ， 
自从 ajax 技术 出 现 ，frame 元 素 就 已 经 很 少 被 使 用 了 。 

9. HTML 废除 了 只 有 部 分 浏览 器 才 支 持 的 元 素 

在 之 前 的 HIML 中 有 一 些 元 素 无 法 兼容 各 个 浏览 器 ， 比 如 marquee、bgsound 元 素 只 能 被 正 
浏览 器 支持 ，applet、blink 也 只 有 部 分 浏览 器 才能 支持 ， 这 些 元 素 在 HTML5 中 全 部 被 废除 。 

10. 其 他 在 HTML5 中 被 废除 的 元 素 

还 有 一 些 元 素 的 功能 在 HTML5 中 被 其 他 元 素 取代 ,这 些 元 素 包括 使 用 ruby 元 素 蔡 代 mb 元素， 
使 用 abbr 元 素 蔡 代 acronym 元 素 ， 使 用 ul 元素 蔡 代 dir 元 素 ， 使 用 from 与 input 元 素 蔡 代 isindex 
元 素 , 使 用 pre 元 素 蔡 代 listing 元 素 , 使 用 code 元 素 蔡 代 xmp 元 素 , 使 用 GUIDS 替代 nextid 元 素 ， 
使 用 “text/plain”MIME 类 型 蔡 代 plaintext 元 素 。 

11. 在 HTML5 中 被 废除 的 属性 

HIML4 中 的 一 些 属性 在 HIML5 中 不 再 被 使 用 ， 而 是 采用 其 他 属性 或 其 他 方式 进行 蔡 代 ， 详 
见 下 表 。 


在 HTML4 中 使 用 的 属性 使 用 该 属性 的 元 素 在 HTML5 中 的 替代 方案 

TeV link、 a rel 

Ee Pe 在 被 链 和 的 次 源 中 使 用 HTTP Content-type 头 
元 素 

shape、coords a 使 用 area 元 素 代替 a 元 素 


longdesc img、 过 ame 使 用 a 元 素 链接 到 较 长 描述 
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在 HTML4 中 使 用 的 属性 使 用 该 属性 的 元 素 在 HTML5 中 的 替代 方案 
target link 多 余 属性 ， 被 省 略 
nohref area 多 余 属性 ， 被 省 略 
profile head 多 余 属性 ， 被 省 略 
version html 多 余 属性 ， 被 省 略 
name img id 
scheme meta 只 为 某 个 表单 域 使 用 scheme 
archive、chlassid、codebose、 而 使 用 data 与 typc 属性 类 调用 插件 。 需 要 使 用 
codetype、declare、standby 这 些 属性 来 设置 参数 时 ， 使 用 param 属性 

使 用 name 与 value 属性 ， 不 声明 它 的 MIME 
valuetype、type Pparam 类 型 

使 用 明确 简洁 的 文字 开头 + 详 述 文字 的 形式 。 
axis、abbr td、 也 可 以 对 更 详细 的 内 容 使 用 tile 属性 ， 以 使 单 

元 格 的 内 容 变 得 简短 

在 被 链接 的 资源 中 使 用 HTTP Content-type 头 
scope td 二 

元 素 

caption、input、 
_ legend、div、hl、 
align i 使 用 CSS 样式 表 替 代 
h6、p 

alink、link、text、vlink、 body 使 用 CSS 样式 表 葵 代 
background、bgcolor 
align, bgcolor, border, cellpadding、 
cellspacing、frame、rules、width Hb 人 
| ay ead ttoot | 使 用 685 样 式 表 乱 从 
nowrap、valign 
Ds bgcolor 、 Sn Hoe 、| 人 血 使 用 CSS 样式 表 普 代 
height、nowrap、valisn、width 
align, bgcolor, char, charoff valien | tr 使 用 CSS 样式 表 蔡 代 
align、char、charoff、valign、width | col、 colgroup 使 用 CSS 样式 表 蔡 代 
align、border、hspace、Vspace object 使 用 CSS 样式 表 蔡 代 
clear br 使 用 CSS 样式 表 蔡 代 
compace、type ol、UL、 使 用 CSS 样式 表 蔡 代 
compace d 使 用 CSS 样式 表 蔡 代 
compace menu 使 用 CSS 样式 表 蔡 代 
width pre 使 用 CSS 样式 表 蔡 代 
align、hspace、Vspace img 使 用 CSS 样式 表 蔡 代 
align、noshade、size、width hr 使 用 CSS 样式 表 蔡 代 
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( 续 表 ) 
在 HTML4 中 使 用 的 属性 使 用 该 属性 的 元 素 在 HTML5 中 的 替代 方案 
align、frameborder、scrolling、 使 用 CSS 样式 表 替 代 
marginheight、marginwidth 
autosubmit menu 


1.2.3 ”全 局 属性 


在 HIML5 中 新 增 了 一 个 “全 局 属性 ”的 概念 ,我们 知道 ， 属 性 的 作用 域 是 元 素 , 全 局 属性 的 


作用 域 就 是 所 有 元 素 。 下 面 我 们 来 介绍 几 种 常用 的 全 局 属性 。 


1. contentEditable 属性 
该 属性 的 主要 功能 是 允许 用 户 编辑 元 素 中 的 内 容 。 它 是 一 个 布尔 值 ， 可 以 是 true 或 false。 当 


值 为 tue 时 ， 在 元 素 焦点 上 单 击 鼠 标 ， 可 以 获得 鼠标 焦点 并 插入 一 个 符号 ， 提 示 用 户 该 元 素 的 内 
容 允 许 编辑 ， 反 之 则 不 提示 。 


另外 ， 该 元 素 还 有 一 个 隐藏 的 inherit 状态 ， 该 状态 也 是 一 个 布尔 值 。 当 值 为 tue 时 允许 编辑 ， 


当 值 为 false 时 不 能 编辑 。 如 果 不 指定 值 ， 就 由 该 元 素 继承 的 父 级 元 素来 决定 。 若 父 级 元 素 允 许 编 


辑 ， 


则 该 元 素 也 允许 编辑 ， 若 父 级 元 素 不 能 编辑 ， 则 该 元 素 也 不 能 编辑 。 
例如 允许 编辑 段落 元 素 内 容 的 代码 如 下 : 

<!doctype html> 

<html> 

<meta charset="utf-8"> 

<head> 

<title>1.2.2</title> 

</head> 

<body> 

<p contenteditable="true"> 此 段落 内 容 可 以 编辑 。</p> 
</body> 

</html> 


效果 如 下 图 所 示 。 


国 '22 
€ 3 © [Blocalhost/HTMLSCSS3/1/1.22 html 


此 要 党 下 认可 以 壬 答 - 


2. designMode 属性 
该 属性 用 于 指定 整个 页 面 是 否 可 编辑 ， 当 页 面 可 编辑 时 ,页面 中 任何 支持 contentEditable 的 元 
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素 都 变 成 可 编辑 状态 。 该 属性 只 能 在 JavaScript 脚本 中 进行 编辑 修改 。 该 属性 并 非 布尔 值 ， 而 是 on 
和 o 人 f。 当 值 为 on 时 ， 页 面 可 编辑 ， 当 值 为 o 红 时 ， 页 面 不 可 编辑 。 
页 面 中 有 以 下 框架 代码 : 


<iframe id="editor"></iframe> 


在 JavaScript 脚本 中 指定 designMode 属性 的 方法 如 下 : 


editor.document .designMode="on" 


3. hidden 属性 


在 HIML5 中 ， 该 属性 用 于 隐藏 或 显示 元 素 。hidden 属性 的 值 是 一 个 布尔 值 ， 当 值 为 tue 时 ， 
元 素 不 可 见 ， 当 值 为 false 时 ， 元 素 可 见 。 需 要 注意 的 是 ， 不 可 见 的 元 素 并 不 是 不 存在 ， 而 是 浏览 
器 并 未 泻 染 该 元 素 ， 如 果 在 页 面 加 载 后 ， 使 用 JavaScript 脚本 对 该 属性 的 值 进行 更 改 ， 则 元 素 变 为 
可 见 状 态 。 例 如 下 面 这 段 代 码 : 

<!doctype html> 

<html> 

<head> 

<title>1.2.3</title> 

</head> 

<body> 

<input type="text" hidden /> 

<input type="text" /> 

<input type="text" hidden /> 

</body> 

</html> 


效果 如 下 图 所 示 。 


和 3 C [Blocalhost/HTMLSCSS3/1/1.2.3.html 


4. spellcheck 属性 


从 字面 的 意思 理解 , 该 属性 的 功能 用 于 进行 拼写 检查 .在 HTML5 中 , spellcheck 属性 针对 input 
元 素 (type=text) 和 textarea 两 个 文本 输入 框 提供 拼写 检查 。 该 属性 的 值 是 一 个 布尔 值 ， 当 值 为 tue 
时 ， 执 行 拼 写 检查 ; 当 值 为 false 时 ， 不 执行 拼写 检查 。 

input 和 textarea 元 素 指定 spellcheck 属性 的 代码 如 下 : 

<input type=text spellcheck="false" /> 


<textarea spellcheck="true"></textarea> 
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(7 如 果 一 个 元 素 的 readOnly 属性 或 disable 属性 为 ttne， 则 不 执行 拼写 检查 。 
注意 


例如 下 面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<title>1.2.4</title> 

</head> 

<body> 

<textarea rows="10" cols="60" spellcheck="true"> 
Please input your name. 


</textarea> 

</body> 

</html> 

效果 如 下 图 所 示 。 
B's 
和 3 © [Dlocalhos/HTMLSCSS3/1 
FLenee irput your nans 

5. tabindex 属性 


一 个 页 面 中 会 有 很 多 个 控件 ， 当 按 Tab 键 时 ， 焦 点 会 在 各 个 控件 之 间 进 行 切换 ，tabindex 用 于 
表示 该 控件 是 第 几 个 被 访问 的 控件 。 如 果 设 置 一 个 控件 的 tabindex 值 为 负数 , 那么 按 下 Tab 键 时 该 
控件 就 不 能 获得 焦点 ， 但 是 仍然 可 以 通过 编程 的 方式 让 控件 获得 焦点 ， 这 在 复杂 的 页 面 或 Web 编 
程 中 是 非常 有 用 的 。Tab 键 按 从 小 到 大 的 顺序 进行 导航 ， 值 为 0 的 空间 会 被 最 后 导航 到 。 例 如 使 用 
Tab 键 对 多 个 文本 框 进行 导航 的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<title>tabindex</title> 

</head> 

<body> 

<input type="text" tabindex="-1" /> 
<input type="text" tabindex="0" /> 
<input type="text" tabindex="3" /> 
<input type="text" tabindezx="1" /> 
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<input type="text" tabindex="2" /> 
</body> 
</html> 


1.2.4 HTMLS5 中 新 增 的 API 


应 用 编程 接口 (application program interface，API) 是 访问 一 个 软件 应 用 的 编程 指令 和 标准 的 
合 。 考虑 到 应 用 程序 开发 人 员 的 需求 , 在 HTMLS5 中 引入 了 大 量 新 的 Javascript API, 可 以 利用 这 
些 内 容 与 对 应 的 HTML 元 素 相关 联 。 它 们 包括 : 


(1) 二 维 绘图 API， 可 以 用 在 一 个 新 的 画布 (Canvas) 元 素 上 以 呈现 图 像 、 游 戏 图 形 或 其 他 
运行 中 的 可 视图 形 。 

(2) 一 个 允许 Web 应 用 程序 将 自身 注册 为 某 个 协议 或 MIME 类 型 的 API。 

(3) 一 个 引入 新 的 缓存 机 制 以 支持 脱 机 Web 应 用 程序 的 API。 

(4) 一 个 能 够 播放 视频 和 音频 的 API， 可 以 使 用 新 的 video 和 audio 元 素 。 

(5) 一 个 历史 记录 API， 可 以 公开 正在 浏览 的 历史 记录 ， 从 而 允许 页 面 更 好 地 支持 AJAX 应 
用 程序 中 实现 的 后 退 功能 。 

(6) 跨 文档 的 消息 传递 , 它 提供 了 一 种 方式 , 使 得 文档 可 以 互相 通信 而 不 用 考虑 它们 的 来 源 ， 
在 某 种 程序 上 ， 这 样 的 设计 是 为 了 防止 跨 站 点 的 脚本 攻击 。 

(7) 一 个 支持 拖 放 操作 的 API， 可 以 与 draggable 特性 相关 联 。 

(8) 一 个 支持 编辑 操作 的 API， 可 以 与 一 个 新 的 全 局 contenteditable 特性 相关 联 。 

(9) 一 个 新 的 网 络 API， 支 持 Web 应 用 程序 在 本 地 网 络 上 互相 通信 ， 并 在 其 源 服务 器 上 维持 
双向 的 通信 。 

(10) 使 用 Javascript API 的 键 / 值 对 实现 客户 端的 持久 化 操作 ， 同 时 支持 嵌入 的 sql 数据 库 。 

(11) 服务 器 发 送 的 事件 ， 通 过 它 可 以 与 新 的 事件 源 (event-source) 元 素 关联 ， 新 的 事件 源 
元 素 有 利于 与 远程 数据 源 的 持久 性 连接 ， 而 且 极 大 地 消除 了 在 Web 应 用 程序 中 对 轮 询 的 需求 。 

测试 题 

(1) 在 HTML5 中 如 何 设置 字符 编码 ? 

(2) 在 HIML5 中 ， 可 以 使 用 哪些 元 素 代替 HIML4 中 的 <div> 元 素 ? 

(3) 在 HIML5 中 用 哪个 元 素 表示 页 脚 ? 

(4) contentEditable 属性 的 功能 是 什么 ? 

(5) spellcheck 属性 针对 哪 两 个 元 素 进行 设置 ? 


1.3 本章 小 结 


本 章 主 要 介绍 了 学 习 HIML5 和 CSS3 之 前 应 做 的 一 些 准备 工作 。 通 过 对 本 章 内 容 的 学 习 ， 读 
者 应 该 能 够 正确 选择 一 款 开 发 HTMLS5 的 工具 ， 以 及 展现 HIMLS 网 页 的 浏览 器 ， 并 对 HTML5 的 
语法 有 一 定 的 了 解 ; 知道 哪些 元 素 和 属性 是 新 增 的 ， 哪 些 是 废除 的 ; 知道 什么 是 全 局 属性 ， 了 解 
HIML5 中 新 增 的 API。 


HTML 元 素 、 属 性 与 结构 


网 页 上 的 内 容 都 是 由 一 个 个 HTML 元 素 和 属性 构成 的 ， 无 论 这 个 网 页 的 效果 多 么 绚丽 ， 内 容 
多 么 复杂 ， 其 基本 组 成 单位 仍然 是 HTML 元 素 。 如 何 对 网 页 的 HTML 元 素 进行 编排 ， 使 其 按 开 发 
者 预定 的 效果 进行 展示 ， 这 就 需要 对 HTML 元 素 和 属性 进行 结构 化 编排 ， 以 便 让 浏览 器 能 正确 解 
析 每 个 元 素 和 属性 ， 让 网 页 展示 出 预定 的 效果 。 本 章 主 要 对 HMTL 元 素 和 属性 进行 介绍 ， 以 及 如 
何 编排 HTML5 文档 。 


2.1 HTML 元 素 


HTML 元 素 是 组 成 HTML 文档 的 基础 ,所 有 的 元 素 都 有 着 相同 的 语法 和 使 用 规则 , 通过 HIML 
元 素 的 嵌 套 ， 组 成 一 个 功能 丰富 的 HTML 文档 。 本 节 将 介绍 HIML 元 素 的 定义 、 语 法 及 赚 套 使 用 
的 方法 。 


2.1.1 HTML 元 素 概述 


在 介绍 HIML 元 素 之 前 ， 首 先 要 知道 什么 是 HIML 标签 。 HITML 标签 是 HTML 语言 中 的 基 
本 单位 。 我 们 来 看 一 个 HIML 文档 ， 代 码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

</body> 
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</html> 


在 这 段 代码 中 ， 两 个 尖 括 号 括 起 来 的 部 分 就 是 一 个 HTML 标签 ， 如 <!doctype html><html> 
<head></title><meta></body> 等 都 叫 作 HIML 标签 -HTML 标签 有 成 对 出 现 的 , 如 <html> 和 </html>， 
也 有 单独 出 现 的 ， 如 <meta>。 成 对 出 现 的 HTML 标签 中 ， 第 一 个 不 带 反 斜 杠 的 标签 称 为 开始 标签 ， 
如 <html>， 第 二 个 带 反 斜 杠 的 标签 称 为 结束 标签 ， 如 </html>。HTML 的 元 素 是 指 从 开始 标签 到 结 
束 标签 的 所 有 代码 。 


单独 出 现 的 HTML 标签 ， 在 规范 的 书写 中 会 有 一 个 反 儿 杠 ， 如 换行 标签 <br />， 如 果 不 
写 反 针 杠 ， 浏 览 器 也 是 能 正确 解析 换行 的 。 在 成 对 出 现 的 标签 中 ， 如 果 结 束 标签 没有 
写 反 针 杠 ， 虽 然 浏览 器 可 以 解析 ， 但 是 效果 并 不 是 我 们 想 要 的 ， 所 以 建议 大 家 按照 规 
范 的 方法 书写 HTML 标签 。 


2.1.2 HTML 元 素 的 语法 


每 一 个 HTML 元 素 都 是 由 HTML 标签 和 元 素 内 容 构成 的 。 在 HTML 开始 标签 和 结束 标签 之 
间 的 内 容 就 是 HTML 元 素 的 内 容 。 例 如 下 面 这 段 代 码 ，HIML 标签 <p> 之 间 的 文字 就 是 HTML 元 
素 的 内 容 。 

<p> 这 是 元 素 内 容 </p> 


另外 ， 单 独 出 现 的 HTML 标签 叫 作 空 元 素 。 空 元 素 在 开始 标签 的 尖 括 号 内 使 用 反 斜 杠 表示 结 
束 ， 例 如 下 面 这 段 代 码 表示 一 个 换行 。 


<br /> 


还 可 以 在 HTML 元 素 标签 的 尖 括 号 内 给 HTML 元 素 定义 属性 。 例 如 下 面 这 段 代 码 为 <article> 
元 素 定义 了 一 个 值 为 “MyArticle” 的 id 属性 。 


<article id="MyArticle"></article> 
关于 HTML 的 属性 ， 我 们 将 在 下 面 的 章节 做 详细 介绍 。 
2.1.3 ”HTML 元 素 的 谱 套 


一 个 HTML 元 素 的 内 容 可 以 是 另 一 个 或 多 个 HTML 元 素 ， 我 们 将 这 种 现象 称 为 HTML 元 素 
的 媒 套 。 例 如 下 面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title>2.1°1</title> 

</head> 

<body> 

<ul> 

<l1i><h3> 第 1 节 </h3></1i> 
<1i><h3> 第 2 节 </h3></1i> 
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<1li><h3> 第 3 节 </h3></1i> 
</ul> 

</body> 

</html> 

在 这 段 代码 中 ，<html> 标 签 嵌 套 了 一 个 <head> 和 <body> 标 签 ，<head> 标 签 又 翌 套 了 <meta> 和 
<title> 标 签 ，<body> 标 签 嵌 套 <ul> 标 签 ，<ul> 标 签 又 嵌 套 了 三 个 <1> 标 签 ， 每 个 <li> 标 签 又 柑 套 了 一 
个 <h3> 标 签 。 

被 嵌 套 的 标签 必须 在 开始 标签 和 结束 标签 之 间 ， 不 能 与 撕 套 的 标签 交错 出 现 。 例 如 下 面 的 这 
段 代码 就 是 错误 的 : 

<1Li><h3> 第 1 节 </1i></h3> 


对 于 错误 的 标签 谈 套 ， 有 些 浏览 器 依然 能 够 解析 ， 这 些 因为 这 些 浏览 器 有 良好 的 容错 
所 宗 机制， 但 是 我 们 必须 要 严格 要 求 自己 ， 规 范 自己 的 编码 规范 。 


2.2 HTML5 属性 


大 多 数 的 HIML 标签 都 具有 属性 ， 属 性 可 以 为 HIML 提供 更 多 的 信息 ， 比 如 对 其 方式 、 背 景 
颜色 、 使 用 哪 种 样式 等 。 下 面 我 们 就 来 看 一 下 HTMLS5 属性 的 基本 使 用 方法 ， 以 及 一 些 常用 标签 属 
性 的 使 用 方法 。 


2.2.1 属性 的 基本 使 用 方法 


在 HTML 元 素 的 开始 标签 中 ， 使 用 一 个 键 值 对 的 方式 来 定义 属性 。 例 如 下 面 这 段 代 码 : 
<a href="htpp://www.baidu.com"> 百 度 </a> 


标签 <a> 元 素 的 开始 标签 中 ， 名 称 为 “href ”的 属性 指定 了 标签 <a> 跳 转 的 地 址 是 
“http://www.baidu.com”。 这 段 代码 与 下 面 两 段 代码 的 效果 相同 : 

<a href='http://www.baidu.com'> 百 度 </a> 

<a href=http://www.baidu.com> 百 度 </a> 

在 HTML5 中 ， 属 性 的 值 有 三 种 表现 形式 ， 即 用 双 引号 括 起 来 、 用 单 引号 括 起 来 或 不 用 引号 ， 
这 三 种 方式 都 可 以 被 浏览 器 解析 。 

虽然 HIML5 提供 了 简略 的 书写 方式 ， 但 是 为 了 规范 代码 ， 在 定义 元 素 属性 的 时 候 ， 提 

提示 倡 大 家 使 用 name="value" 的 方式 ， 不 要 省 略 双 引号 。 

再 来 看 下 面 的 代码 : 


<input type="checkbox" checked="true"/> 
<input type="checkbox" checked/> 


这 两 段 代 码 都 表示 一 个 被 选中 的 复 选 框 ， 不 同 之 处 在 于 第 一 个 属性 使 用 checked="true"， 第 二 
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个 属性 直接 使 用 checked。 在 HTML5 中 ， 如 果 属 性 的 值 是 一 个 布尔 值 ， 就 可 以 直接 使 用 属性 名 代 
蔡 属 性 为 tue 的 值 ， 如 果 不 定义 属性 名 ， 就 代表 该 属性 值 为 false。 


2.2.2 ”HTML5 全 局 属性 


在 上 一 章 中 我 们 介绍 了 HTML5 新 增 的 5 种 全 局 属性 ， 下 面 来 介绍 一 下 其 他 的 全 局 属性 。 
1. class 属性 


在 HIML5 中 可 以 使 用 class 属性 对 元 素 指定 CSS 类 选择 器 。CSS 类 选择 器 用 于 指定 元 素 使 用 
什么 样式 进行 展示 。 关 于 CSS 类 选择 器 将 会 在 后 面 的 章节 中 进行 详细 介绍 。 使 用 class 属性 给 <span> 
元 素 指定 字体 大 小 和 颜色 的 代码 如 下 : 

<!doctype html> 

<html> 

<meta charset="utf-8"> 

<head> 

<title>2.2.1</title> 

<style> 

.spanFont { font-size:24px; } 
.spanColor { color:Red; } 


</style> 

</head> 

<body> 

<span class=" spanFont spanColor "> 全 局 属性 class</span> 

</body> 

</html> 

效果 如 下 图 所 示 。 
回 z24 
所 © Dlocalhost/HTMLSCSS3/2/2.2.1.himl 
全 局 属性 class 

2. id 属性 


id 属性 规定 了 HIML 元 素 在 整个 HTML 文档 中 的 唯一 标识 。id 属性 的 语法 如 下 : 
<element id="value"> 


在 HTML 文档 中 ， 可 以 使 用 id 属性 准确 定位 HTML 元 素 ， 从 而 对 元 素 进行 各 种 操作 。 例 如 
使 用 id 属性 为 HTML 元 素 设置 样式 的 代码 如 下 : 
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<!DOCTYPE HTML> 

<html> 

<meta charset="utf-8"> 

<head> 

<title>2.2.2</title> 

<style type="text/css"> 
#headerColor{color:red;} 
#contentColor{color:blue;} 

</style> 

</head> 

<body> 

<hl id="headerColor"> 这 里 是 红色 的 标题 </h1> 

<p> 一 个 段落 。</p> 

<p id="contentColor"> 这 里 是 蓝 色 的 内 容 </p> 


</body> 

</html> 

效果 如 下 图 所 示 。 
回 222 
€ © [DlocalhosHTMLSCSS3/2/2.2.2htmi 
这 里 是 红色 的 标题 

3. title 属性 


title 属性 用 于 描述 元 素 的 信息 ， 当 用 户 将 鼠标 悬 停 到 具有 该 属性 的 元 素 上 时 , 会 显示 title 的 内 
容 信 息 。 例 如 下 面 这 段 代 码 : 
<!doctype html> 
<html> 
<meta charset="utf-8"> 
<head> 
<title>2.203</title> 
</head> 
<body> 
世界 贸易 组 织 简称 <acronym title="World Trade Organization">WTO</acronym> 
</body> 
</html> 


效果 如 下 图 所 示 。 
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B223 x 
€ 3 @ Olocalhos/HTMLSCS: 


世 异 贸易 组 织 篇 称 WTO 


4. style 


style 属性 用 于 规定 元 素 的 行内 样式 ， 并 覆盖 任何 全 局 的 样式 设 定 。 例 如 通过 样式 选择 器 设 定 
文本 的 颜色 为 红色 ， 同 时 又 通过 style 属性 设 定 文本 的 颜色 为 蓝 色 ， 那么 style 属性 将 覆盖 样式 选择 
器 ， 字 体 显示 为 蓝 色 。 代 码 如 下 : 


<!doctype html> 
<html> 
<meta charset="utf-8"> 
<head> 
<title>2.2.4</title> 
<style> 
.redColor{ color:red;} 
</style> 
</head> 
<body> 
<span class="redColor"” style="color:Blue"> 这 段 文字 是 什么 颜色 呢 ? </span> 
</body> 
</html> 


效果 如 下 图 所 示 。 


© DlocalhosVHTMLSCSS3/2/2.2.4html 
和 良 文字 是 什么 颜色 呢 ? 


7 
这 | 


5. accesskey 属性 


accesskey 属性 用 于 给 HTML 元 素 定义 快捷 键 ， 以 便 获得 焦点 或 激活 元 素 。 例 如 在 一 个 HIML 
文档 中 有 两 个 按钮 ， 其 中 一 个 设置 了 快捷 键 ， 另 一 个 没有 设置 ， 当 按 下 快捷 键 时 ， 获 得 焦点 的 按钮 
有 一 个 蓝 色 的 边框 。 代 码 如 下 : 

<!doctype html> 

<html> 
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<head> 
<meta charset="utf-8"> 
<title>2.2.5</title> 

</head> 

<body> 

<button> 没 选中 的 按钮 </button> 

<button accesskey="q"> 快 捷 键 是 Alt+q</button> 


</body> 
</html> 
效果 如 下 图 所 示 。 
如 © Blocalhost/HTMLSCSS3/2/225 html 
ep [RA] 
6. dir 属性 


dir 属性 规定 了 元 素 内 容 的 排列 方向 。 该 属性 对 应 三 个 值 ， 如 果 是 从 左 向 右 排列 ， 则 使 用 地， 如 


果 是 从 右 向 左 排列 ， 则 使 用 世 ; 如 果 要 根据 浏览 器 内 容 自动 判断 ， 则 使 用 auto。 例 如 下 面 这 段 代 码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>2.2.6</title> 
</head> 
<body> 
<bdo dir="rtl">1234567</bdo><br /> 
<bdo dir="ltr">1234567</bdo><br /> 
<bdo dir="auto">1234567</bdo><br /> 
</body> 
</html> 


效果 如 下 图 所 示 。 
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7. contextmenu 属性 


contextmenu 属性 是 HTMLS5 中 新 增 的 属性 ， 用 于 指定 上 下 文 菜单 的 数据 源 。 当 用 户 在 指定 位 
置 单 击 鼠 标 右键 时 ， 弹 出 快捷 菜单 ， 也 可 以 显示 多 级 菜单 。 遗 憾 的 是 目前 只 有 FireFox 浏览 器 实现 
了 该 功能 。 添 加 菜单 的 代码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>2.2.7</title> 
</head> 
<body> 
<section contextmenu="myContextMenu"> 
<p> 右 键 单 击 这 里 弹出 快捷 菜单 </p> 
<menu type="context" id="myContextMenu"> 
<menuitem label=" 菜 单 1"></menuitem> 
<menuitem label=" 菜 单 2"></menuitem> 
<menu label=" 菜 单 3"> 
<menuitem label=" 菜 单 4"></menuitem> 
<menuitem label=" 菜 单 5"></menuitem> 
</menu> 


</menu> 

</section> 
</body> 
</html> 


效果 如 下 图 所 示 。 


227 
人 


右 凶 点 击 这 里 请 站 由 


8. draggable 属性 


draggable 属性 是 HTMLS5 的 一 个 新 属性 ， 用 于 设置 是 否 可 以 进行 拖 搜 。draggable 的 值 是 一 个 
布尔 值 ， 当 值 为 tue 时 ， 可 以 进行 拖 搜 ， 当 值 为 false 时 ， 不 能 进行 拖 搜 。 将 鼠标 停放 在 要 拖 搜 的 
元 素 上 ， 按 住 鼠 标 左 键 即 可 进行 拖 搜 操作 。 例 如 下 面 这 段 拖 搜 一 段 文字 的 代码 : 

<!doctype html> 

<html> 
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<head> 
<meta charset="utf-8"> 
<title>2.2.8</title> 
</head> 
<body> 
<p draggable="true"> 可 以 用 鼠标 拖 动 这 段 文字 。</p> 
</body> 
</html> 


效果 如 下 图 所 示 。 


© ElocalhosVHTMLSCS 


可 以 用 妃 标 拖 动 这 良 文字 , 


13. dropzone 属性 
dropzone 是 HIMLS 的 一 个 新 属性 ,用 于 指定 当 被 拖 动 的 数据 在 拖 动 到 元 素 上 时 , 是 否 被 复制 、 
移动 或 链接 。 该 属性 的 语法 如 下 : 


<element dropzone="copylmovellink"> 


遗憾 的 是 ， 目 前 还 没有 任何 一 款 浏览 器 支持 该 属性 。 


2.3 ”新 增 的 主体 结构 元 素 


每 一 个 复杂 的 网 页 都 是 由 若干 个 区 域 构成 的 ,在 HIML5 中 , 为 了 使 网 页 的 文档 结构 更 加 清晰 ， 
新 增 了 页 书 、 页 脚 、 内 容 等 与 文档 结构 相关 的 主体 结构 元 素 。 本 节 我 们 就 来 学 习 HTMLS5 新 增 的 这 
些 主体 结构 元 素 的 定义 、 使 用 方法 和 案例 。 


2.3.1 article 元 素 


article 元 素 用 于 定义 外 部 的 内 容 ， 可 以 是 一 篇 新 的 文章 、 一 篇 博文 、 一 个 帖子 、 一 段 评论 等 ， 
也 可 以 是 来 自 其 他 外 部 源 的 内 容 。 一 个 article 元 素 可 以 有 其 自己 的 标题 、 内 容 和 脚注 , 还 可 以 与 其 
他 article 元 素 榜 套 使 用 。 例 如 下 面 这 段 代 码 : 


<article> 


<header> 
<h1> 面 包 </h1l> 
<p><b> 面 包 </b> 面 包 ， 也 写作 者 包 ， 是 一 种 用 五 谷 ( 一 般 是 麦 类 〉 磨 粉 制作 并 加 热 而 制 成 
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</header> 
<p><b> 豆 沙 面包 </b> 高 筋 面粉 150 克 ，……- </p> 
<p><b> 乳 酪 石榴 包 : </b> 红 豆沙 150 克 ，…… </p> 


<article> 
<header> 吃 面包 的 好 处 </header> 
<p> 面 包 以 小 麦 为 主要 原料 ……</p> 
</article> 
<footer> 


<p> 版 权 所 有 ， 文 章 可 自由 转载 ， 但 请 注 明 来 源 </p> 
</footer> 
</article> 


在 这 段 代码 中 , header 元 素 中 嵌入 了 文章 的 标题 部 分 , p 元 素 堪 入 了 文章 的 正文 , 嵌 套 的 article 
元 素 又 引用 了 另外 一 篇 文章 ， 最 后 在 结尾 处 ，footer 元 素 欢 入 了 一 些 版 权 信息 。 


2.3.2 ”section 元素 


section 元 素 定义 文档 中 的 节 ， 比 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 一 个 section 元 素 
通常 由 内 容 及 其 标题 组 成 。 例 如 下 面 这 段 代码 : 
<section> 
<h1> 面 包 </h1> 
<p><b> 面 包 </b> 面 包 ， 也 写作 者 包 ， 是 一 种 用 五 谷 一般 是 麦 类 〉 磨 粉 制作 并 加 热 而 制 成 
的 食品 。*…*…… </p> 


</section> 


在 这 段 代码 中 ，<h1> 元 素 嵌 入 了 这 段 文字 的 标题 ， <p> 元素 嵌入 了 这 段 文字 的 正文 ， 标题 和 正 
文 构成 了 文档 内 容 一 个 独立 的 块 ， 这 个 块 使 用 section 元 素 表示 。 


【分 不 推荐 给 没有 标题 的 内 容 使 用 section 元 素 。 
提 示 
section 元 素 用 于 表示 文章 的 段 ， 是 一 个 独立 的 块 ， 而 article 元 素 用 于 表示 文章 外 部 的 内 容 ， 
虽然 它 也 是 独立 的 ， 但 是 不 要 把 两 者 混淆 。 例 如 在 一 篇 文章 中 需要 引用 另 一 篇 文章 的 某 些 段落 时 ， 
其 代码 结构 如 下 : 
<article> 
<section> 
<h1> 第 一 段 标题 </h1> 
<p> 第 一 段 正文 </p> 
</section> 
<section> 
<h1> 第 二 段 标题 </h1> 
<p> 第 二 段 正文 </p> 
</section> 
<section> 


<h1> 第 三 段 标题 </h1> 
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<p> 第 三 段 正文 </p> 
</section> 
</article> 
再 例如 在 一 个 段落 中 需要 引用 另 一 篇 文章 时 ， 其 代码 结构 如 下 : 
<section> 
<h1> 这 里 是 段落 标题 </h1> 
<article> 
<h2> 标 题 </h2> 
<p> 内 容 </p> 
</article> 
<article> 
<h2> 标 题 </h2> 
<p> 内 容 </p> 
</article> 


</section> 


article 元 素 可 以 看 成 是 一 种 特殊 的 section 元 素 ，section 元 素 主要 强调 分 段 或 分 块 ， 属 


注意 于 内 容 的 部 分 ， 而 article 元 素 则 主要 强调 其 完整 性 。 


2.3.3 nav 元 素 


nav 元 素 用 于 定义 导航 链接 的 内 容 ， 可 以 作为 页 面 导航 的 链接 组 ， 其 中 的 导航 元 素 链接 到 其 他 
页 面 或 当前 页 面 的 其 他 部 分 ， 使 HTML 代码 在 语义 化 方面 更 加 精准 ， 同 时 对 屏幕 阅读 器 等 设备 的 
支持 也 更 好 。 
在 HIML5 之 前 ， 我 们 通常 会 使 用 <div> 元 素 或 <ul id="nav"> 这 样 的 代码 来 表示 页 面 的 导航 ， 
而 在 HIML5 中 ， 我 们 可 以 直接 将 导航 链接 列表 放 在 <nav> 元 素 中 。 例 如 下 面 这 段 代 码 : 
<nav> 
<ul> 
<li><a href="index.html"> 主 页 </a></1i> 
<1i><a href="/post/"> 随 笔 </a></1i> 
<li><a href="/contact/"> 联 系 </a></1i> 
</ul> 
</nav> 


nav 元 素 在 网 页 中 起 着 非常 重要 的 作用 ， 比 如 网 页 顶部 的 导航 条 ， 其 作用 是 在 多 个 页 面 之 间 进 
行 跳 转 ; 网 页 侧 边栏 导航 ， 其 作用 是 从 当前 页 面 跳 转 到 其 他 页 面 ; 网 页 页 内 导航 ， 其 作用 是 在 一 个 
网 页 中 的 多 个 主要 部 分 进行 跳 转 ， 翻 页 导航 ， 其 作用 是 在 多 个 网 页 之 间 实 现 前 后 页 滚动 。 


2.3.4 aside 元 素 

aside 元 素 用 来 定义 article 元 素 以 外 的 内 容 ， 其 内 容 应 该 与 article 的 内 容 相 关 。 这 样 的 情况 在 
生活 中 很 常见 ， 如 文章 中 的 名 词 解释 。 名 词 解释 作为 文章 中 的 一 部 分 ， 其 内 容 与 文章 相关 ， 这 种 情 
况 下 就 可 以 使 用 aside 元 素 。 示 例 代码 如 下 : 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>2.3.1</title> 
</head> 
<body> 
<p> 中 子 的 概念 是 由 卢 瑟 福 提出 的 , 中 子 的 存在 是 1932 年 B. 查 德 威 克 用 a 粒子 麦 击 的 实验 中 证 实 的 。 
</p> 
<aside> 
<h4> 中 子 </h4> 
中 子 (Neutron) 是 组 成 原子 核 的 核子 之 一 。 </aside> 
</nav> 
</body> 
</html> 


浏览 效果 如 下 图 所 示 。 


EEy = 
© Dlocalhos/HTML5CSS3/2/ html 


中 子 的 概念 是 由 卢 到 得 提 出 的 ， 中 子 的 存在 是 1932 年 B. 查 德 破 克 用 a 科 子 大志 的 实 驼 中 证 实 的 ， 
中 子 


中 子 (Xeutron) 是 组 成 原子 核 的 核子 之 一 ， 


另外 ，aside 元 素 的 内 容 还 可 以 用 作文 章 的 侧 栏 ， 其 内 容 作 为 文章 的 附属 信息 。 例 如 nav 元 素 
导航 作为 aside 元 素 的 内 容 ， 这 样 就 实现 了 一 个 侧 边栏 导航 条 。 示 例 代 码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>2.3.2</tit1le> 
</head> 
<body> 
<aside id="sitebar"> 
<nav> 
<h4> 热 门 文 章 </h4> 
<ul> 
<1i><a href=""> 识别 好 公司 还 是 差 公司 的 三 张 图 </a></1i> 
<li><a href=""> 新 媒体 运营 应 有 什么 样 的 思想 ? </a></1i> 
<li><a href=""> 所 谓 的 互联 网 运营 是 什么 ?</a></1i> 
</ul> 
<h4> 随 机 文章 </h4> 


<ul> 
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<1i> <a href=""> 处 理 企业 危机 的 六 大 法 则 </a> </1i> 
<li> <a href=""> 30 秒 教 你 高 效 评价 网 页 用 户 体验 </a> </1i> 
<1i> <a href=""> 六 个 细节 细 化 团队 运营 </a> </1i> 
<1i> <a href-""> 如 何 提高 执行 力 ? 把 沟通 漏斗 倒 过 来 ! </a> </1i> 
<li> <a href=""> 如 何 研究 用 户 ， 哪 里 寻求 大 数据 资源 ? </a> </1i> 
</ul> 
</nav> 
</aside> 
</body> 
</html> 


浏览 效果 如 下 图 所 示 。 


© BD localhost/HTMLSCSS3/2/23.2html 


2.3.5 time 元 素 


time 元 素 用 于 定义 日 期 和 时 间 。 由 于 时 区 的 问题 ， 如 果 网 页 上 显示 的 时 间 处 理 不 好 ， 就 会 让 
人 产生 歧义 ， 比 如 应 该 是 下 午 3 点 30 分 ， 却 显示 凌晨 5 点 30 分 ， 因 此 为 了 能 够 在 网 页 上 准确 地 显 
示 时 间 ， 让 所 有 人 都 不 会 产生 歧义 ，HIMLS 新 增 了 time 元 素 。time 元 素 可 以 表示 带 时 区 的 时 间 ， 
也 可 以 定义 多 种 格式 的 日 期 和 时 间 ， 代 码 如 下 : 

<p> 我 们 早上 <time>9:00</time> 上 班 。</p> 

<p> 今 天 是 <time datetime="2014-10-01">2014 年 10 月 1 日 </time></p> 

<p> 今 天 是 <time datetime="2014-10-01"> 国 庆 节 </time></p> 

<p><time datetime="2014-10-01T9:00"> 国 庆 节 早上 9:00</time> 升 国旗 </p> 

<p><time datetime="2014-10-01T9:00Zz"> 国 庆 节 早上 9:00</time> 升 国旗 </p> 

<p><time datetime="2014-10-01T9:00+08:00"> 国 庆 节 早上 9:00 是 美国 时 间 下 午 
5:00</time></p> 


time 元 素 的 datetime 属性 指定 机 器 读 取 的 日 期 和 时 间 , time 元 素 的 内 容 显 示 在 网 页 上 。datetime 
属性 中 的 大 写字 母 工 表 示 时 间 ，Z 表示 UTC 标准 时 间 ，“+8:00” 表 示 时 区 。 
另外 ，time 元 素 还 有 一 个 pubdate 属性 ， 表 示 article 元 素 的 发 布 日 期 ，pubdate 属性 是 一 个 可 
选 的 布尔 值 。 例 如 下 面 这 段 代 码 : 
<article> 
<header> 
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<h1> 提 前 
<time datetime="2014-11-06"> 竣 工 </time> 
通知 </h1> 

<p> 发 布 时 间 : 
<time datetime="2014-11-10" pubdate>2012 年 11 月 10 日 </time> 


</p> 
</header> 
<p> 感 谢 各 位 一 年 来 的 鼎力 支持 . .... </p> 
</article> 
在 这 段 代码 中 ， 第 一 个 time 元 素 表 示 竣 工 的 实际 时 间 ， 第 二 个 time 元 素 表示 这 个 通知 发 布 的 
时 间 ， 需 要 使 用 pubdate 属性 指定 第 二 个 time 元 素 代表 了 通知 的 发 布 时 间 。 


2.4 新 增 的 非 主体 结构 元 素 


主体 结构 对 应 的 是 非 主 体 结构 ,在 HTMLS5 中 ， 非 主体 结构 元 素 表示 迪 辑 结构 或 附加 信息 。 本 
节 将 主要 介绍 HTML5 中 新 增 的 几 个 非 主 体 结构 元 素 的 定义 、 使 用 方法 和 案例 。 


2.4.1 header 元 素 


header 元 素 用 于 定义 HTML 文档 的 页 眉 ， 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 。header 元 
素 通常 表示 整个 页 面 或 页 面 内 一 个 内 容 区 块 的 标题 通常 情况 下 ,一 个 header 元 素 内 翌 一 个 heading 
元 素 (hl-h6) 。header 元 素 的 示例 代码 如 下 : 
<header> 
<hl>header 元 素 </h1> 
<nav> 
<ul> 
<li><a href="index.html"> 主 页 </a></1i> 
<li><a href="html5/">HTML5 标签 </a></1i> 
<1i><a href="sitemap.html"> 网 站 地 图 </a></1i> 
</ul> 
</nav> 
</header> 


在 这 段 代码 中 , hl 元 素 表示 该 区 块 内 容 的 标题 , nav 元 素 表示 一 个 导航 列表 。 除 此 之 外 , header 
元 素 的 内 容 还 可 以 是 数据 表格 、 搜 索 表单 或 相关 的 Logo 图 片 ， 以 及 下 面 我 们 将 要 介绍 的 hgroup 
元 素 等 。 需 要 注意 的 是 ，header 元 素 应 该 放 在 页 面 的 开头 ， 而 且 可 以 有 多 个 。 


2.4.2 hgroup 元 素 


hgroup 元 素 用 于 对 header 元 素 标题 及 其 子 标题 进行 分 组 。 在 使 用 header 元 素 时 ， 通 常会 嵌入 
一 个 heading (hl-h6) 元 素 ， 那 是 因为 只 有 一 个 标题 ， 并 且 没有 子 标题 。 如 果 header 元 素 的 标题 下 
还 有 子 标题 ， 就 需要 使 用 hgroup 元 素 对 其 进行 分 组 。 代 码 如 下 : 
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<article> 
<header> 
<hgroup> 
<h1> 一 级 标题 </h1> 
<h2> 二 级 标题 </h2> 
<h2> 二 级 标题 </h2> 
<h3> 三 级 标题 </h3> 
</hgroup> 
</header> 
</article> 


2.4.3 footer 元 素 


footer 元 素 用 于 定义 区 块 的 脚注 , 该 区 块 可 以 是 article 元 素 或 section 元 素 。 通常 情况 下 , footer 
元 素 会 包含 创作 的 姓名 、 文 档 的 创建 时 间 、 联 系 方式 和 版 权 信息 等 。 
<article> 
<header> 
<h1> 文 章 标题 </h1> 
</header> 
<section> 
<header> 段 落 标 题 </header> 
<p> 段 落 正文 </p> 
<footer> 段 落脚 注 </footer> 
</section> 
<footer> 文 章 脚注 </footer> 
</article> 


如 果 footer 元 素 中 需要 显示 联系 方式 ， 应 该 使 用 下 面 介绍 的 address 元 素 。 
提 示 
2.4.4 address 元 素 


address 元 素 用 于 定义 文档 作者 或 拥有 者 的 联系 信息 ， 包 括 文档 作者 或 文档 维护 者 的 姓名 、 网 
站 、 电 子 邮 件 、 联 系 电话 等 。 如 果 address 元 素 位 于 article 元 素 内 部 ， 则 表示 该 文章 作者 或 拥有 者 
的 联系 信息 。 通 常情 况 下 ，address 元 素 应 该 添加 到 网 页 的 头 部 或 底部 。 例 如 将 文章 作者 的 联系 方 
式 显示 在 footer 元 素 中 的 代码 如 下 : 
<footer> 
<address> 
<ul> 
<1i> 联 系 地 址 :北京 市 海淀 区 </1i> 
<1i> 电 子 邮件 :XXXQ@XxXX.-com</1i> 
<1i> 联 系 电话 :021-8459658</1i> 
</ul> 
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</address> 
</footer> 


2.5 HTML5 结构 


到 目前 为 止 , 我 们 已 经 学 习 了 HIMLS 的 元 素 、 属性、 新 增 的 主体 结构 元 素 和 非 主体 结构 元 素 ， 
这 些 都 属于 HTML5 中 的 局 部 成 员 , 本 节 将 继续 学 习 如 何 使 用 HIML5 的 结构 元 素 构 建 一 个 HTML5 
页 面 。 


2.5.1 文档 结构 大 纲 


一 个 好 的 文档 结构 大 纲 ， 可 以 让 整 篇 文章 的 结构 显得 非常 清晰 ， 这 样 不 仅 可 以 使 阅读 者 对 文 
章 的 结构 一 目 了 然 ， 而 且 对 于 屏幕 阅读 器 来 说 ， 能 够 更 好 地 解读 文档 结构 。 

在 HTML4 中 , 开发 者 往往 会 使 用 大 量 的 div 元 素来 展现 文档 的 结构 大 纲 , 力图 做 到 清晰 明了 ， 
而 在 HIML5 中 ,使 用 新 的 结构 元 素 就 可 以 达到 这 样 的 效果 。 在 编排 文档 结构 大 纲 时 ， 可 以 使 用 标 
题 元 素 (hl-h6) 来 展示 各 个 级 别 的 内 容 区 块 标题 。 


2.5.2 ”内 容 区 块 的 编排 方式 
内 容 区 块 的 编排 方式 可 以 分 为 两 种 ， 一 种 是 “ 显 式 编排 ”， 另 一 种 是 “ 隐 式 编排 ”。 
1. 显 式 编排 


显 式 编排 使 用 主体 结构 元 素 创建 文档 结构 ， 并 配合 内 容 区 块 使 用 标题 元 素 ， 这 样 可 以 使 浏览 
器 明确 地 显示 文档 大 纲 。 例 如 下 面 的 代码 : 

<h1> 网 页 标题 </h1> 

<p> 网 页 正文 </p> 


<section> 
<h2> 主 体 结构 标题 </h2> 
<p> 主 体 结构 正文 </p> 


</section> 


2. 隐 式 编排 


隐 式 编排 仅 使 用 标题 元 素 创建 文档 结构 ， 浏 览 器 通过 对 标题 元 素 的 解析 来 区 分 内 容 区 块 ， 不 
同等 级 的 标题 元 素 对 应 不 同 的 内 容 区 块 。 例 如 下 面 的 代码 : 

<h1> 网 页 标题 </h1> 

<p> 网 页 正文 </p> 

<h2> 主 体 结构 标题 </h2> 

<p> 主 体 结构 正文 </p> 
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2.5.3 ”标题 分 级 


标题 元 素 可 分 为 6 级 , hl 的 级 别 最 高 , h6 的 级 别 最 低 。 每 一 个 标题 元 素 都 对 应 一 个 内 容 区 块 ， 
在 隐 式 编排 中 ,根据 标题 元 素 级 别 从 高 到 低 ， 自 动 生成 下 级 内 容 区 块 。 如果 新 的 标题 元 素 级 别 等 于 
或 高 于 上 一 个 标题 ， 就 生成 新 的 内 容 区 块 。 
另外 ， 在 嵌 套 使 用 的 文档 结构 中 ， 不 同 的 内 容 区 块 可 以 使 用 相同 级 别 的 标题 。 例 如 下 面 这 段 
代码 : 
<article> 
<h1> 文 章 的 标题 </h1> 
<p> 文 章 的 内 容 </p> 


<section> 
<h1> 段 落 的 标题 </h1> 
<p> 段 落 的 正文 </p> 
</section> 
</article> 


测试 题 
(1) 什么 是 HTML 标签 ? HTML 的 语法 是 什么 ? 
(2) HTML5 新 增 了 哪些 全 局 属性 ? 
(3) article 元 素 和 section 元 素 有 什么 区 别 ? 
(4) hgroup 元 素 有 什么 作用 ? 
(5) HIML5 内 容 区 块 的 编排 方式 有 哪 几 种 ? 


2.6 ”本 章 小 结 


本 章 主 要 学 习 了 HTMLS5 的 元 素 、 属 性 、 新 增 的 主体 结构 元 素 和 非 主体 结构 元 素 , 以 及 HTML5 
文档 结构 的 编排 方式 。 通 过 本 章 的 学 习 ， 应 该 熟练 掌握 HIMLS 元 素 和 属性 的 使 用 方法 ， 能 够 使 用 
常见 HIMLS 元 素 和 属性 搭建 基本 的 文档 结构 。 


JavaScript 基础 知识 


JavaScript 是 目前 最 流行 的 脚本 语言 之 一 ， 它 可 以 为 HIML 页 面 增加 很 多 动态 效果 ,使 网 页 看 
起 来 更 加 炫 酷 ， 用 户 体验 更 加 友好 。HMTL 5 中 新 增 的 很 多 功能 都 使 用 了 JavaScript 技术 ， 为 了 能 
够 更 好 地 学 习 HTML5 的 新 功能 ， 本 章 为 初学 者 提供 了 JavaScript 的 一 些 基础 知识 。 


3.1 JavaScript 简介 


3.1.1 什么 是 JavaScript 


JavaScript 是 一 种 直译 式 脚 本 语言 ， 亦 是 一 种 动态 类 型 、 弱 类 型 、 基 于 原型 的 语言 ， 内 置 支持 
类 型 。 它 的 解释 器 被 称 为 JavaScript 引擎 ， 为 浏览 器 的 一 部 分 ， 广 泛 用 于 客户 端的 脚本 语言 ， 最 早 
是 在 HIML 网 页 上 使 用 ， 用 来 给 HTML 网 页 增加 动态 功能 。 

JavaScript 是 由 Netscape 公司 的 Brendan Eich 于 1995 年 在 网 景 导 航 者 浏览 器 上 首次 设计 实现 
而 成 .因为 Netscape 与 Sun 合作 ,Netscape 管理 层 希望 它 外 观看 起 来 像 Java, 所 以 取 名 为 JavaScript。 
但 实际 上 它 的 语法 风格 与 Self 及 Scheme 较为 接近 。 

为 了 取得 技术 优势 ， 微 软 推出 了 JScript，CEnvi 推出 了 ScriptEase， 与 JavaScript 同样 可 在 浏 
览 器 上 运行 。 因 为 JavaScript 兼容 于 ECMA 标准 ， 所 以 也 称 为 ECMAScript。 


3.1.2 ” JavaScript 的 特点 


JavaScript 具有 以 下 特点 : 


(1) JavaScript 是 一 种 解释 型 语言 ， 不 需要 编译 ， 直 接 嵌 入 到 HTML 代码 中 ， 由 浏览 器 逐 行 
加 载 解释 执行 。 
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(2) JavaScript 主要 用 来 向 HTML 页 面 添加 交互 行为 ， 最 新 版 本 的 JavaScript 除了 向 HTML 
页 面 添加 功能 外 ， 还 可 以 用 于 编写 服务 器 端 代码 。 

(3) JavaScript 语言 简单 ， 弱 类 型 ， 语 法 与 java、C 语言 类 似 。 

(4) 通常 情况 下 ，JavaScript 都 在 浏览 器 中 运行 ， 只 需要 浏览 器 支持 即 可 。JavaScript 语言 编 
写 的 服务 器 端 代码 ， 需 要 在 Node.Js 中 运行 。 

(5) 使 用 JavaScript 可 以 在 前 端 实现 一 些 与 服务 器 完全 没有 联系 的 效果 ，JavaScript 采用 事件 
驱动 的 方式 进行 ，HTML 页 面相 关 控 件 的 事件 在 触发 时 会 自动 执行 响应 的 脚本 或 函数 。 


3.1.3 JavaScript 的 组 成 


JavaScript 的 三 大 组 成 部 分 是 : 


(1) ECMAScript: JavaScript 的 核心 ， 描 述 了 语言 的 基本 语法 和 数据 类 型 。 
(2) 文档 对 象 模型 (DOM) : DOM 是 HTML 和 XML 的 应 用 程序 接口 。DOM 将 把 整个 页 
面 规划 成 由 节点 层级 构成 的 文档 。HTML 或 XML 页 面 的 每 个 部 分 都 是 一 个 节点 的 衍生 物 。 例 如 下 
面 这 段 代 码 : 
<html> 
<head> 
<title>Test</title> 
</head> 
<body> 
<p>Hello World!</p> 
</body> 
</html> 


这 段 代码 可 以 利用 DOM 绘制 成 一 个 节点 层次 图 ， 如 下 图 所 示 。 


| Fewanl 


DOM 通过 创建 树 来 表示 文档 ， 从 而 使 开发 者 对 文档 的 内 容 和 结构 具有 空前 的 控制 力 。 利 用 
DOM API 可 以 轻松 地 删除 、 添 加 和 蔡 换 节点 getElementById、childNodes、appendChild 、 
innerHIML ) 。 

(3) 浏览 器 对 象 模型 (BOM) : 对 浏览 器 窗口 进行 访问 和 操作 ， 比 如 弹出 新 的 浏览 器 窗口 ， 
移动 、 改 变 和 关闭 浏览 器 窗口 ， 提 供 详细 的 网 络 浏览 器 信息 (navigator Object) 、 详 细 的 页 面 信息 
(location Object) 、 详 细 的 用 户 屏幕 分 辨 率 的 信息 (screen Object) ， 对 cookies 的 支持 等 BOM 


第 3 章 JavaScript 基础 知识 | 31 


作为 JavaScript 的 一 部 分 并 没有 相关 标准 的 支持 ， 每 一 个 浏览 器 都 有 自己 的 实现 ， 虽 然 有 一 些 非 事 
实 的 标准 ， 但 还 是 给 开发 者 带 来 一 定 的 麻烦 。 


3.1.4 JavaScript 基本 结构 
在 HIML 页 面 中 ，JavaScript 的 基本 结构 如 下 : 


<script language="javascript" type="text/javascript"> 
// 这 里 是 JavaScript 代码 


</script> 
script 表 示 这 里 使 用 的 是 脚本 语言 , 其 中 language="javascript" 表 示 当 前 使 用 的 语言 是 javascript。 
3.1.5 ”JavaScript 执行 原理 


JavaScript 脚本 是 通过 JavaScript 解析 引擎 来 解析 执行 的 ， 不 同 的 浏览 器 内 核 使 用 不 同 的 解析 
引擎 ， 所 以 相同 的 JavaScript 代码 在 不 同 的 浏览 器 中 有 可 能 解析 出 不 同 的 结果 。 通 常情 况 下 ， 
JavaScript 执行 的 过 程 可 以 简单 地 概括 为 以 下 几 个 步骤 ; 


(1) 客户 端 请 求 某 个 网 页 ， 即 上 网 时 在 地 址 栏 中 输入 某 个 网 址 ， 浏 览 器 接收 到 网 址 之 后 ， 向 
远程 Web 服务 器 提出 请 求 。 

(2) Web 服务 器 响应 请 求 ，Web 服务 器 找到 请 求 的 页 面 ， 并 将 整个 页 面包 含 JavaScript 的 脚 
本 代码 作为 响应 内 容 发 送 回 客户 端 机 器 。 

(3) 客户 端 浏览 器 解释 并 执行 带 脚 本 的 代码 ， 客 户 端 浏览 器 打开 回应 的 网 页 文件 内 容 ， 从 上 
往 下 逐 行 读 取 并 显示 其 中 的 HTML 或 脚本 代码 ， 脚 本 从 服务 器 端 下 载 到 客户 端 ， 然 后 在 客户 端 运 
行 ， 它 不 会 占用 服务 器 的 资源 ， 因 此 通过 客户 端 运行 脚本 ， 可 以 分 担 部 分 服务 器 的 任务 ， 极 大 地 减 
轻 了 服务 器 的 压力 ， 从 而 间接 地 提升 了 服务 器 的 性 能 。 


3.2 在 网 页 中 引入 JavaScript 的 方式 


可 以 使 用 多 种 方式 在 网 页 中 引入 JavaScript 代码 , 根据 具体 的 使 用 情况 ， 可 以 采用 不 同 的 方式 
为 网 页 引入 JavaScript。 


3.2.1 使 用 <script> 标 签 


<scripf> 标 签 作为 JavaScript 的 基本 结构 , 通常 会 在 HIML 页 面 的 <head> 标 签 中 引入 JavaScript 
代码 。 例 如 下 面 这 段 代码 : 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<script language="JavaScript" type="text/javascript"> 
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alert ("Hello World!") 7 
</script> 
</head> 
<body> 
</body> 
</html> 


对 于 avaScript 的 初学 者 而 言 ，alert0 是 一 个 非常 有 用 的 方法 ， 它 可 以 帮助 初学 者 调试 
提示 JavaScript 代码 ， 逐 步 确定 问题 。 


除了 在 <head> 标 签 中 引入 JavaScript 代码 以 外 ， 还 可 以 在 <body> 标 签 中 引入 JavaScript 代码 。 
例如 下 面 这 段 代码 : 


<html> 

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 

</head> 

<body> 

<script language="JavaScript" type="text/javascript"> 
alert ("Hello World!"); 

</script> 

</body> 

</html> 


由 于 JavaScript 解析 引擎 是 自 上 而 下 逐 行 解析 代码 , 因此 以 上 两 段 代 码 都 会 在 页 面 打开 的 时 候 
弹出 一 个 对 话 框 。 


3.2.2 ”使 用 外 部 JavaScript 文件 


如 果 页 面 中 需要 引入 的 JavaScript 代码 非常 多 ， 依 然 使 用 上 面 的 方式 在 页 面 中 引入 JavaScript 
代码 ， 整 个 页 面 就 会 非常 混乱 ， 代 码 的 可 读 性 也 会 非常 差 。 为 了 避免 这 种 情况 的 出 现 ， 可 以 将 
JavaScript 代码 保存 成 单独 的 文件 ， 然 后 在 HTML 页 面 中 引入 即 可 ， 这 样 HTML 页 面 与 JavaScript 
相关 的 代码 就 只 有 一 句 话 。 例 如 下 面 这 段 代码 : 

<html> 

<head> 

<meta charset="UTF-8"> 
<title>Title</title> 
<script src="Test.js" ></script> 

</head> 

<body> 

</body> 

</html> 


在 HTML 页 面 中 引入 外 部 JavaScript 文件 是 比较 实用 的 方法 , 可 以 将 JavaScript 代码 根据 功能 
分 成 若干 个 文件 ， 然 后 在 HTML 页 面 中 逐个 引入 ， 也 可 以 在 多 个 HTML 页 面 中 分 别 引入 同一 个 
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JavaScript 文件 ， 这 样 不 仅 有 利于 JavaScript 代码 管理 ， 而 且 还 提高 了 JavaScript 代码 的 使 用 效率 。 
3.2.3 直接 在 HTML 标签 中 使 用 


还 有 一 种 方式 ， 就 是 在 HTML 页 面 中 直接 使 用 JavaScript 代码 ， 一 般 不 推荐 使 用 ， 但 在 某 些 
情况 下 ， 可 以 作为 快速 调试 的 一 种 方法 。 例 如 下 面 这 段 代 码 : 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title></head> 
<body> 


<input name='btn' type="button"” value=" 弹 出 消息 框 " 
onclick="javascript:alert ("欢迎 你 ");"/> 

</body> 

</html> 


当 用 户 单 击 HTML 页 面 中 的 这 个 按钮 时 ， 就 会 弹出 一 个 对 话 框 ， 显 示 “ 欢 迎 你 ”。 


3.3 ”数据 类 型 和 变量 


每 一 种 编程 语言 都 有 它 的 数据 类 型 和 变量 ,JavaScript 也 不 例外 。 下 面 我 们 就 来 学 习 JavaScript 
的 数据 类 型 和 变量 。 


3.3.1 变量 


变量 是 用 于 存储 信息 的 容器 ， 可 以 使 用 字母 来 保存 值 ， 这 些 字母 就 称 之 为 变量 。 声 明 变量 后 ， 
可 以 通过 表达 式 对 这 些 变 量 进行 运算 。 例 如 下 面 的 代码 : 

Var X=-57 

Var y=8; 

Var Z=X+Y; 


在 JavaScript 中 ， 可 以 使 用 描述 性 更 好 的 词语 为 变量 命名 ， 但 是 变量 的 命名 必须 符合 以 下 规则 。 
(1) 变量 必须 以 字母 开头 。 
(2) 变量 也 可 以 以 3 或 开头 。 
(3) 变量 名 称 对 大 小 写 敏 感 ， 也 就 是 说 x 和 和 X 是 两 个 不 同 的 变量 。 
3.3.2 Number 
JavaScript 中 只 有 一 种 数字 类 型 ， 那 就 是 Number， 它 不 同 于 其 他 编程 语言 的 整 型 、 浮 点 型 等 
数字 类 型 , 比较 常用 的 JavaScript 数字 类 型 是 带 小 数 点 和 不 带 小 数 点 的 两 种 数字 。 例如 下 面 的 代码 : 


<html> 
<head> 
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<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<script> 
Var pi=3.14 
Var x=45 
alert ("pi="+pi+";x="+x) 
</script> 
</body> 
</html> 


将 这 段 代码 保存 为 testhtml 文件 ， 然 后 双击 打开 这 个 文件 ， 就 可 以 看 到 弹出 的 消息 显示 
“pi=3.14:x=45”， 如 下 图 所 示 。 


we ee | 
Dre x a 
CG OO | © fie///F/testhtml 女 | 旬 标 图 :| 
来 自 此 网 页 


Pi=3.14x=45 


本 章 的 代码 示例 中 均 可 以 使 用 这 种 方式 查看 代码 效果 。 另 外 ， 笔 者 使 用 的 是 谷歌 浏览 
提示 器 ，JavaScript 的 alert 弹 框 效果 会 因为 浏览 器 的 不 同 而 不 同 。 


还 可 以 使 用 科学 计数 法 表示 非常 大 或 非常 小 的 数字 。 例 如 下 面 这 段 代码 : 
Var y=32e5; 
Var z=32e-5; 


其 中 y 表示 3200000，z 表示 0.00032。 

如 果 数 字 的 前 缀 为 0， 就 表示 这 是 一 个 八进制 数 ， 如 果 数 字 的 前 缀 是 0x， 就 表示 这 是 一 个 十 
六 进 制 数 。 例 如 下 面 的 代码 : 

Var y = 0366; 

Var Z = OxFF; 


当 数 字 运 算 结 果 超 过 了 JavaScript 所 能 表示 的 数字 上 限 ( 溢 出) 时， 结果 为 一 个 特殊 的 无 穷 大 
(infinity) 值 ， 在 JavaScript 中 以 Infinity 表示 。 同 样 地 ， 当 负数 的 值 超过 了 JavaScript 所 能 表示 的 
负数 范围 时 ， 结 果 为 负 无 穷 大 ， 在 JavaScript 中 以 -Infinity 表示 。 我 们 可 以 通过 数学 运算 来 获取 这 
样 的 数字 ， 例 如 下 面 的 代码 : 

var x = 2/0; 

var y = -2/0; 
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如 果 在 数字 计算 中 夹杂 了 非 数字 的 值 ， 就 会 出 现 NaN 错误 , 该 错误 表示 这 个 值 不 是 一 个 数字 。 
可 以 使 用 全 局 函数 isNan0 来 判断 一 个 值 是 不 是 NaN 值 。 例 如 下 面 这 段 代码 : 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<script> 
var x = 100 
alert (isNaN (x)); 


Var y = "Hello" 
alert (isNaN (Y) ) 7 
</script> 
</body> 
</html> 


执行 这 段 代码 后 ， 先 弹出 一 个 false， 然 后 弹出 一 个 tue。 说 明 x 表示 的 值 是 一 个 数字 ， 而 y 
表示 的 值 不 是 一 个 数字 。 
3.3.3 ”字符 串 

字符 串 是 另外 一 个 非常 重要 的 数据 类 型 ， 用 于 存储 一 系列 的 字符 。JavaScript 规定 字符 串 可 以 
使 用 单 引号 也 可 以 使 用 双 引号 。 例 如 下 面 的 代码 : 


var x = "Hello'7 
var y = "Hello"; 


当 字 符 串 中 需要 包含 引号 时 ， 可 以 使 用 单 引号 或 双 引 号 将 其 包围 。 例 如 下 面 的 代码 : 


var x ee 


Var y = "He is called 'Sean'"; 


字符 串 有 一 个 长 度 属性 ， 用 于 计算 字符 串 的 长 度 。 例 如 下 面 的 代码 : 

Var txt="Hello World!"; 

document .write (txt.length); 

执行 这 段 代 码 后 ，HTML 页 面 上 会 输出 字符 串 Hello World! 

这 里 的 document.write() 用 于 将 内 容 输 出 到 HTML 页 面 上 ， 这 种 方式 也 可 以 作为 调试 程 

时 全 。 序 的 一 种 方法 。 

字符 串 在 实际 应 用 中 ， 还 会 经 常用 到 indexOf0 方 法 ， 用 于 定位 某 个 字符 在 字符 串 中 出 现 的 位 
置 ， 如 果 这 个 字符 串 中 不 存在 定位 的 字符 ， 那 么 将 返回 -1。 例 如 下 面 的 代码 : 


Var str="Hello world!"; 


Var n=str.indexOf ("world"); 
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Var m= str.indexOof ("bear"); 
document .write ("world 的 位 置 是 "+n); 
document .write ("” bear 的 位 置 是 "+m); 


执行 这 段 代码 后 ，HTML 页 面 上 会 输出 以 下 内 容 : 
world 的 位 置 是 6 ，bear 的 位 置 是 -1。 


说 明 world 在 字符 串 的 第 6 个 位 置 ， 而 bear 不 是 这 个 字符 串 中 的 内 容 。 这 里 需要 注意 ， 计 算 
字符 串 位 置 时 ， 索 引 是 从 0 开始 的 。 

replace() 方 法 用 于 在 字符 串 中 查找 并 蔡 换 指 定 的 字符 串 。 例 如 下 面 的 代码 ; 

Var str="Good morning, Rudy." 

Var n=str.replace ("Rudy ","Todd"); 

document .write (n) 7 


执行 这 段 代 码 后 ， 页 面 上 显示 字符 串 “Good moming, Todd.” 
3.3.4 布尔 值 


布尔 值 (Boolean) 是 程序 中 条 件 判 断 的 依据 ， 它 的 值 有 两 种 : true 和 false。 当 值 为 tue 时 ， 
执行 条 件 判断 为 真 的 代码 ; 当 值 为 false 时 ， 执 行 条 件 判断 为 假 的 代码 。 关 于 布尔 值 的 使 用 方法 ， 
将 在 后 面 讲解 条 件 判断 时 详细 叙述 。 


3.3.5 ”比较 运算 符 


比较 运算 符 罗 辑 语句 中 用 于 测定 变量 或 值 是 否 相等 。JavaSecript 中 提供 了 多 种 比较 运算 符 ， 用 
于 处 理 各 种 邮 辑 运算 。 

JavaScript 中 用 “一 ”表示 等 于 ， 用 “= 一 ”表示 全 等 ， 它 们 都 可 以 用 来 表示 两 个 值 是 否 相 等 ， 
区 别 在 于 ， 三 个 等 号 可 以 区 分 值 的 数据 类 型 是 否 相等 。 例 如 下 面 的 代码 : 

Var x=10 

Var y="10" 

alert (x==y) 

alert (x===y) 


执行 这 段 代码 后 ， 首 先 弹出 tme， 然 后 弹出 false。 这 是 因为 第 二 次 比较 的 时 候 还 比较 了 两 个 
值 的 数据 类 型 是 否 一 致 ， 因 为 x 是 一 个 数字 型 ， 而 y 是 一 个 字符 串 ， 所 以 它们 不 等 。 

Javaseript 中 用 “!=” 表 示 不 等 于 ， 用 “>” 表 示 大 于 ， 用 “<” 表 示 小 于 ， 用 “>-” 表 示 大 于 
或 等 于 , 用 “<= ”表示 小 于 或 等 于 。 在 JavaSeript 的 比较 运算 符 中 ,除了 等 于 (一 ) 和 全 等 于 (一 =) 
需要 特殊 关注 外 ， 其 他 的 比较 运算 符 都 没有 什么 难度 。 


3.3.6 ”数组 


数组 是 指数 据 的 有 序列 表 。 数 组 中 的 每 个 值 称 为 数组 的 一 个 元 素 ， 元 素 在 数组 中 的 位 置 称 为 
索引 ， 数 组 的 索引 是 从 0 开始 的 。 同 一 个 数组 中 元 素 的 数据 类 型 可 以 是 任何 类 型 ， 如 数字 型 、 字 符 
型 、 布 尔 型 ， 甚 至 是 另 一 个 数组 。 
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可 以 直接 使 用 “ 口 ”来 创建 数组 ， 数 组 中 的 每 个 元 素 用 逗号 分 隔 。 例 如 下 面 的 代码 : 
var address=["Beijing","ShangHai","HeFei"] 

Var ages=[20,24,26] 

Var array=["Sean",25,"Beijing"] 


还 可 使 用 构造 函数 来 创建 数组 ， 数 组 的 构造 函数 是 Aray0。 例 如 下 面 的 代码 : 
Var colors = new Array(); 

Var colors = new Array(6); 

Var colors = new Array("blue", "red", "green"); 


每 个 数组 都 有 一 个 length 属性 ， 表 示 数 组 中 元 素 的 个 数 ， 第 二 个 构造 函数 中 的 参数 6 表示 这 
个 数组 的 长 度 为 6。 数组 中 的 元 素 用 逗号 分 隔 ， 如 果 在 创建 数组 的 时 候 ， 在 最 后 一 个 元 素 的 后 面 多 
添加 了 一 个 逗号 ， 虽 然 数组 本 身 不 会 出 错 ， 但 数组 的 长 度 会 发 生 改变 ， 有 可 能 造成 其 他 错误 。 

创建 数组 后 ， 可 以 通过 数组 的 索引 来 访问 和 修改 数组 中 元 素 的 值 。 例 如 下 面 的 代码 ; 

var address=["Beijing","ShangHai","HeFei"] 

alert (address[0]) 

address[0]="NanJing"; 

alert (address[0]) 


在 这 段 代 码 中 ， 首 先 创建 了 一 个 数组 address， 该 数组 中 有 三 个 元 素 ， 通 过 alert 函数 将 索引 为 
0 的 元 素 输出 ， 弹 出 框 将 显示 字符 串 “Beijing”。 然 后 将 字符 串 “NanJing ”赋值 给 索引 为 0 的 元 
素 ， 再 次 将 其 和 输出， 此 时 弹出 字符 串 “NanJing”。 

数组 的 遍历 将 在 后 面 循环 语句 中 详细 介绍 。 


3.3.7 对象 


对 象 是 带 有 属性 和 方法 的 特殊 数据 类 型 , JavaScript 中 提供 了 多 个 内 置 对 象 , 比如 String、 Date、 
Array 等 ， 通 过 这 些 对 象 的 属性 和 方法 可 以 很 方便 地 操作 字符 串 、 日 期 和 数组 。 例 如 通过 String 对 
象 的 tim0 方 法 移 除 字符 串 首位 空白 , 或 者 通过 toUpperCase() 方 法 将 字符 串 中 所 有 的 字符 转换 为 大 
写 ， 代 码 如 下 : 

Var str="Good morning, Rudy!" 

str=str.trim() 

str=str.toUpperCase () 

alert (str) 


执行 这 段 代 码 后 ， 字 符 串 首位 的 空白 将 被 移 除 ， 所 有 字母 被 转换 成 大 写 并 输出 。 
除了 内 建 的 对 象 以 外 ， 用 户 还 可 以 自 定义 对 象 。 例 如 下 面 的 代码 : 
person=new Object (); 

person.name="Mr Zhang"; 

person.age=32; 

person.address="Beijing"; 


这 段 代码 创建 了 一 个 person 对 象 ， 并 分 别 给 对 象 的 name、age 和 address 属性 赋值 。 
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3.4 条件 判断 


条 件 判断 用 于 根据 不 同 的 条 件 来 执行 不 同 的 代码 。 在 JavaScript 中 , 主要 有 以 下 几 种 条 件 语句 : 
@ 让 语句 : 只 有 当 指定 条 件 为 true 时 ， 使 用 该 语句 来 执行 代码 。 

@ 让 ..else 语句 : 当 条 件 为 true 时 执行 代码 ， 当 条 件 为 false 时 执行 其 他 代码 。 

@ 让..else 让 ...else 语句 : 使 用 该 语句 来 选择 多 个 代码 块 之 一 来 执行 。 

@ switch 语句 : 使 用 该 语句 来 选择 多 个 代码 块 之 一 来 执行 。 


3.4.1 if 语 句 


下 语句 是 最 简单 的 条 件 判 断 语 句 , 只 有 当 指定 条 件 为 tue 时 才 执行 相应 的 代码 。 下 语句 的 语法 
如 下 : 
if (condition){ 
当 条 件 为 tue 时 执行 的 代码 
} 
小 括号 0 里 面 是 需要 判断 的 条 件 ， 大 括号 全 里 面 是 条 件 为 tue 时 需要 执行 的 代码 。 例 如 下 面 这 
段 代码 : 
Var score=92; 
if(score > 90){ 
alert ("成 绩 ， 优秀 ") ; 
} 


3.4.2 if..else 语句 


让 .else 语句 是 在 条 件 为 tue 时 执行 站 语句 下 的 代码 ， 在 条 件 为 false 时 执行 else 语句 下 的 其 
他 代码 。 其 语法 如 下 : 
if (condition){ 
当 条 件 为 true 时 执行 的 代码 
}else{ 
当 条 件 不 为 true 时 执行 的 代码 
} 


例如 下 面 这 段 代 码 : 
var score =85; 
if(score < 60){ 

alert ("成 绩 : 不 合格 "); 
}elsef{ 

alert ("成 绩 : 合格 "); 
| 
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3.4.3 ”if...else if....else 语句 


当 判 断 条 件 出 现 两 种 以 上 情况 时 ， 需 要 根据 不 同 的 条 件 执行 不 同 的 代码 ， 该 语句 最 终 只 会 选 
择 一 种 匹配 的 条 件 执行 相应 的 代码 。 其 语法 如 下 : 
让 (conditionl){ 
当 条 件 1 为 tue 时 执行 的 代码 
}else if (condition2){ 
当 条 件 2 为 tue 时 执行 的 代码 
Jelse{ 
当 条 件 1 和 条 件 2 都 不 为 tue 时 执行 的 代码 
} 


例如 下 面 这 段 代码 : 
Var score = 92; 
if(score <60){ 
alert ("成 绩 : 不 合格 ") 7 
}else if(score>=60 && Score<90)1{ 


alert ("成 绩 : 良 "); 
}elsef{ 


alert ("成 绩 : 优秀 ") 7 
} 


3.4.4 ”switch 语句 


当 条 件 很 多 的 时 候 ， 最 终 只 有 一 个 判断 语句 执行 ， 如 果 使 用 多 个 放 ..else 匹配 条 件 ， 就 会 显得 
非常 烦琐 ， 此 时 可 以 使 用 switch 语句 进行 匹配 ， 当 条 件 不 同 的 时 候 执行 不 同 的 代码 。 其 语法 如 下 : 
switch(n) { 
case 1: 
执行 代码 块 1 
break: 
Case 2: 
执行 代码 块 2 
break: 
default: 
与 case 1 和 case 2 不 同时 执行 的 代码 
} 


其 中 是 一 个 表达 式 ， 通 常情 况 下 n 是 一 个 变量 。 当 n 的 值 与 case 后 面 的 值 匹 配 时 ， 执 行 相 
应 case 里 面 的 代码 ， 最 后 通过 break 跳出 。 如 果 所 有 的 case 都 没有 匹配 成 功 ， 就 执行 default 里 面 
的 代码 。 

例如 下 面 的 代码 : 

Var month=57 

Switch (month) { 


40 | HTML5+CSS3+jJavaScript 前 端 开发 基础 


case 1: 

Case 22 

Case 3: 
alert ("一 季度 "); 
break; 

case 4: 

Case Sy 

case 6: 
alert ("二 季度 "); 
break; 

case 7: 

case 8: 

case 9: 
alert ("三 季度 "); 
break; 

case 10: 

case 11: 

case 12: 
alert ("四 季度 "); 
break; 


} 
当 多 个 case 的 执行 代码 相同 时 ， 可 以 将 这 些 case 语句 并 列 。 


3.5 ”循环 语句 


循环 语句 可 以 将 一 段 代 码 块 反复 执行 ， 根 据 循 环 语句 的 不 同 ， 可 以 指定 循环 次 数 或 不 指定 循 
环 次 数 , 直到 条 件 成 立 为 止 。 JavaScript 中 主要 有 for、 for...in、while 和 do...while 这 几 种 循环 语句 。 


3.5.1 for 循环 


for 循环 是 比较 常见 的 一 种 循环 语句 ， 可 以 指定 循环 次 数 。 其 基本 语法 如 下 : 
for (语句 1; 语句 2; 语句 3) 
二 
被 执行 的 代码 块 
; 


其 中 语句 1 (代码 块 ) 在 开始 前 执行 ,语句 2 定义 运行 循环 〈 代 码 块 ) 的 条 件 ， 语 句 3 在 循环 
〈 代 码 块 ) 已 被 执行 之 后 执行 。 例 如 下 面 这 段 代 码 : 
for (var i=0;i<5;i++){ 
document .write (i+"—"); 


1， 
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在 这 个 for 循环 中 ， 设 置 变量 i 的 起 始 值 为 0， 判断 i 是 否 小 于 5， 因 为 0 小 于 $ 为 tmue， 所 以 
输出 i 的 值 和 一 条 横 线 ， 然 后 对 i 进行 自 加 运算 。 此 时 i 的 值 变 成 了 1， 再 次 判断 i 是 否 小 于 5， 因 
为 1 小 于 5 为 tme， 所 以 再 次 输出 i 的 值 和 一 条 横 线 。 以 此 类 推 ， 直 到 i 不 小 于 5 为 止 。 执 行 这 段 
代码 后 ， 页 面 显 示 如 下 : 

0-1-2-3-4- 


for 循环 也 可 以 用 于 遍历 数组 中 的 值 。 例 如 下 面 的 代码 : 


var address=["Beijing","ShangHai","HeFei"] 
for (var i=0;i<address.length;i++){ 
document .write (address[i]+"-—"); 


} 
数组 的 length 属性 用 于 获取 数组 的 长 度 ， 根 据 数组 的 长 度 循环 输出 数组 中 的 元 素 。 执 行 这 段 
代码 后 ， 页 面 显示 如 下 : 


Beijing-ShangHai-HeFei- 
3.5.2 for...in 循环 


for.…in 循环 主要 用 于 对 数组 和 对 象 的 属性 进行 遍历 。for… in 循环 中 的 代码 每 执行 一 次 ， 就 会 
对 数组 的 元 素 或 对 象 的 属性 进行 一 次 操作 。 其 语法 如 下 : 
for (variable in object) { 
被 执行 的 代码 
} 


variable 表示 一 个 属性 ，object 表示 可 枚 举 属性 被 迭代 的 对 象 。 例 如 下 面 的 代码 : 
var address=["Beijing","ShangHai","HeFei"] 
for (var i in address)1{ 
document .write (address[i]+"-"); 
} 
执行 这 段 代码 后 ， 页 面 显 示 如 下 : 


Beijing-ShangHai-HeFei— 
3.5.3 ”while 循环 


while 循环 会 在 指定 条 件 为 真 时 循环 执行 代码 块 ， 如 果 不 设 定 while 循环 条 件 中 的 变量 数值 限 
定 的 值 ， 就 会 一 直 循 环 。 其 语法 如 下 : 
while (条 件 ) 
{ 
需要 执行 的 代码 
} 
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例如 下 面 的 代码 : 
Var i=0 


while (i<5) { 
var str="i 的 值 是 "+i+"<br>"; 
document .writeln (str); 
i++? 


} 
在 这 段 代码 中 ， 首 先 设置 变量 i 的 值 为 0， 然 后 判断 i 是 否 小 于 5， 因 为 0 小 于 5， 所 以 执行 代 


码 块 ， 输 出 一 段 字符 ，i 自 加 1。 此 时 i 的 值 是 1， 判 断 i1 是 否 小 于 5， 因 为 1 小 于 5， 继 续 执 行 代 
码 块 ， 输 出 一 段 字 符 , i 自 加 1。 以 此 类 推 ， 直 到 i 等 于 5， 循环 结束 。 执 行 这 段 代码 后 ， 页 面 输出 
以 下 内 容 : 


注意 


i 的 值 是 0 
i 的 值 是 1 
i 的 值 是 2 
i 的 值 是 3 
i 的 值 是 4 


使 用 while 循环 的 时 候 ， 一 定 要 记得 在 循环 代码 中 改变 条 件 变量 的 值 ， 否 则 while 条 件 
永远 为 真 ， 会 造成 死 循环 。 


3.5.4 do.…while 循环 


do.…while 循环 是 while 循环 的 变 体 ， 该 循环 会 在 检查 条 件 是 否 为 真 之 前 执行 一 次 代码 块 ， 如 


果 条 件 为 真 ， 就 会 重复 这 个 循环 。 其 语法 如 下 : 


do 
村 
需要 执行 的 代码 
} 
while (条 件 ): 


例如 下 面 这 段 代 码 : 


Var i=0; 

do{ 
var str="i 的 值 是 "+i+"<br>"; 
document .writeln (str); 
i++? 

}while (i<5) 


与 while 循环 一 样 ， 为 了 不 出 现 死 循 环 ， 同 样 需要 在 循环 代码 中 改变 条 件 变量 的 值 。 
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3.6 ”函数 定义 和 调用 


函数 是 JavaScript 中 的 一 个 重要 功能 ， 它 是 一 段 代码 的 集合 ， 这 段 代码 可 以 在 不 同 地 方 调 用 ， 
从 而 提高 JavaScript 代码 的 复 用 性 。 


3.6.1 定义 函数 


在 JavaScript 中 可 以 通过 fonction 关键 字 定义 函数 ， 函 数 可 以 有 参数 ， 也 可 以 没有 参数 。 其 语 
法 如 下 : 

function functionName(parameters) { 

执行 的 代码 

} 

例如 下 面 这 段 代 码 : 

function sum(numl, num2) { 

document .writeln (numl+num2); 

} 

这 段 代码 定义 了 一 个 名 为 sum 的 函数 , 该 函数 有 numl 和 num2 两 个 参数 ， 函数 的 主要 功能 是 
输出 numl 和 num2 的 值 。 

还 可 以 通过 一 个 表达 式 定义 函数 ， 函 数 表达 式 可 以 存储 在 变量 中 。 例 如 下 面 这 段 代码 : 

Var X = function (a, b) {return a * b}; 

这 上 段 代码 中 定义 了 一 个 函数 ， 该 函数 没有 函数 名 ， 其 返回 两 个 参数 的 乘积 并 保存 在 变量 x 中 。 
3.6.2 ”调用 函数 

函数 声明 后 可 以 直接 通过 函数 名 进行 调用 ， 如 果 函 数 带 有 参数 ， 在 调用 函数 时 就 需要 相应 的 
传 入 参数 。 例 如 下 面 这 段 代码 : 


function getAddress (name,address) { 
document .write (name+" is come from "+address) 
} 
getAddress ("Sean", "BeiJing"); 
执行 这 段 代码 后 ， 页 面 输出 以 下 内 容 : 


Sean is come from BeiJing 
测试 题 


(1) 如 何在 HIML 页 面 中 引入 JavaScript 代码 ? 
(2) JavaScript 的 数据 类 型 有 哪些 ? 
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(3) 在 使 用 while 循环 时 ， 如 何 才能 避免 死 循环 ? 
(4) 在 调用 函数 时 如 何 传递 参数 ? 


3.7 本章 小 结 


本 章 主 要 介绍 了 JavaScript 的 一 些 基本 知识 ， 包 括 在 HTML 页 面 中 如 何 引 入 JavaScript 代码 、 
JavaScript 中 的 数据 类 型 和 变量 、JavaScript 条 件 判 断 和 循环 语句 的 使 用 方法 ， 以 及 函数 的 定义 和 调 
用 。 通 过 本 章 的 学 习 ， 读 者 应 该 掌握 JavaScript 的 一 些 基本 用 法 ， 并 为 后 面 章节 的 学 习 打 下 基础 。 


ES6 基础 知识 


ECMAScript 6.0 (以 下 简称 ES6) 是 JavaScript 语言 的 下 一 代 标 准 ， 它 的 问世 标志 着 一 个 JS 
时 代 的 到 来 。ES6 提供 了 大 量 的 新 特性 ， 不 仅 简化 了 JavaScript 语言 的 写法 ， 而 且 还 扩大 了 其 应 用 
范围 。 本 章 主要 介绍 ES6 中 的 一 些 新 功能 和 常用 功能 ， 包 括 声 明 变 量 和 常量 、 模 板 字符 串 、 篆 头 
函数 、 解 构 赋 值 、Set 和 Map 数据 结构 等 。 


4.1 准备 测试 环境 


对 于 初学 者 而 言 ， 搭 建 一 个 完全 适应 ES6 所 有 功能 的 测试 环境 并 不 是 一 件 容易 的 事情 ， 所 以 
这 里 介绍 两 种 相对 简单 的 测试 环境 的 搭建 方法 ， 以 便 初 学 者 能 迅速 上 手 开始 练习 。 

方法 1: 首先 下 载 Chrome (谷歌 ) 浏览 器 并 安装 ， 然 后 启动 浏览 器 ， 按 F12 功能 键 打开 调试 
窗口 ， 选择 如 下 图 所 示 的 Console 标签 , 在 下 面 的 空白 处 可 以 输入 测试 的 ES6 代码 。 由 于 这 是 一 个 
测试 用 的 控制 台 输出 窗口 ， 因 此 在 输入 代码 时 ， 若 需要 换行 ， 则 可 以 按 下 Shift+Enter 键 ， 开 始 输 
入 第 二 行内 容 ， 内 容 输入 结束 后 ， 按 Enter 键 执行 命令 。 还 可 以 在 文本 文件 中 输入 代码 ， 然 后 复制 
到 这 里 直接 执行 。 
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方法 2: 使 用 集成 开发 环境 WebStorm 和 Node.js 搭建 ES6 的 测试 环境 。 首 先 到 WebStorm 官 
网 下 载 最 新 版 的 WebStorm， 下 载 地 址 为 http://www.jetbrains.com/Webstorm/， 下 载 成 功 后， 按照 提 
示 安 装 并 注册 WebStorm 集成 开发 环境 。 然 后 到 NodeJs 官网 下 载 并 安装 NodeJs， 下 载 地 址 为 
http://nodejs.cn/download/， 下 载 成 功 后 按照 提示 进行 安装 即 可 。 两 个 工具 都 安装 完成 后 ， 还 需要 为 
它们 进行 一 些 简单 的 配置 。 启 动 WebStorm， 选 择 fle 一 setting 命令 ， 打 开 Settings 窗口 ， 如 下 图 
所 示 。 


第 4 章 ES6 基础 知识 | 47 


在 窗口 左上 角 的 搜索 框 中 输入 nodejs， 找 到 需要 配置 的 选项 
interpreter 选项 ， 参 照 上 图 。 然 后 选择 如 下 图 所 示 的 JavaScript 选项 ， 
Version 下 拉 列 表 中 选择 ECMAScript 6 选项 ， 保 存 设置 后 如 


然后 在 右边 窗口 中 配置 Node 
在 右边 的 JavaScript language 


选择 file 一 new 一 project 菜单 命令 ， 打 开 如 下 图 所 示 的 窗口 ， 选 择 Empty Project 选项 ， 新 建 一 
个 项 目 。 


在 新 建 的 项 目 文件 上 单 击 鼠 标 右键 ， 选 择 New 一 JavaScript File 命令 ， 新 建 一 个 名 为 testjs 的 
JavaScript 文件 ， 如 下 图 所 示 。 
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在 新 建 的 testjs 文件 中 ， 输 入 以 下 测试 代码 。 按 下 ShifttF10 组 合 键 ， 或 者 单 击 右 上 角 的 绿色 
箭头 ， 执 行 这 段 代 码 ， 控 制 台 中 将 依次 输出 1~3。 
Tor Ua 必 太 有 汪 二 和 和 下 于 
console.1o0g (i); 


} 
至 此 ， 我 们 的 测试 环境 就 搭建 完成 了 ， 同 学 们 可 以 根据 实际 情况 选择 方便 的 测试 环境 。 


4.2 声明 变量 let 和 const 


4.2.1 let 命令 


众所周知 ，JavaScript 中 用 var 关键 字 来 声明 变量 ， 而 在 ES6 中 , 还 可 以 使 用 新 增 的 let 关键 字 
来 声明 变量 ， 与 var 不 同 ，let 声明 的 变量 只 在 代码 块 内 有 效 。 例 如 下 面 这 段 代 码 : 
{ 
let a=5; 
Var b=8; 
console.1og(a); 
console.1og(b); 


} 
执行 上 面 这 段 代码 后 ， 控 制 台 第 一 行 输出 5， 第 二 行 输 出 8， 说 明 这 两 个 变量 能 够 正常 输出 。 
如 果 将 输出 命令 放 在 大 括号 的 外 面 ， 例 如 下 面 这 段 代 码 : 


let a=5; 


Var b=8; 
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console.1log(a); 


console.1log(b); 
执行 上 面 这 段 代码 后 ， 控 制 台 输 出 以 下 错误 信息 : 
Uncaught ReferenceError: a is not defined 


说 明 变量 a 在 未 被 声明 的 范围 内 使 用 。 
4.2.2， 块 级 作用 域 


这 里 指 的 代码 块 可 以 理解 为 人 内 的 范围 ， 如 果 存 在 多 层 代 码 块 嵌 套 的 情况 ， 内 层 代码 块 中 声 
明 的 变量 就 不 能 在 外 层 代码 块 中 调用 ,相反 , 外 层 代 码 块 中 声明 的 变量 却 可 以 在 内 层 代 码 块 中 调用 。 
例如 下 面 这 段 代 码 : 

{ 


let a=5; 


console.1log(a); 


执行 上 面 这 段 代码 后 ， 由 于 变量 a 在 内 层 代码 块 中 声明 ， 在 外 层 代码 块 中 调用 ， 因 此 控制 台 
会 输出 错误 信息 : Uncaught ReferenceError: a is not defined。 相 反 的 情况 ， 例 如 下 面 这 段 代码 
{ 
let a=5; 
console.1og(a) 7 
} 


执行 上 面 这 段 代码 后 ， 由 于 变量 a 在 外 层 代码 块 中 声明 ， 在 内 层 代码 块 中 调用 ， 因 此 控制 台 
能 够 输出 正确 的 值 5。 在 ES6 中 ， 块 级 作用 域 允许 任意 典 套 ， 但 是 外 层 作用 域 无 法 读 取 内 层 作用 域 
的 变量 ， 而 外 层 作 用 域 的 变量 可 以 被 内 层 作用 域 调 用 。 

另 一 个 常用 的 作用 域 就 是 for 循环 ， 在 for 循环 中 ， 计 数 器 的 变量 始终 保存 在 一 个 作用 域内 ， 
这 样 才能 保证 计数 正确 。 例 如 下 面 这 段 代码 : 

for(let i=0;i<8;i++){ 

console.1o0g(i); 


让 
执行 上 面 这 段 代码 后 ， 控 制 台 依次 输出 0.1.2.3,4.5,6.7。 如 果 将 输出 命令 放 在 for 循环 之 外 ， 例 
如 下 面 这 段 代码 : 


for(let i=0;i<8;i++){} 


console.1o0g(i); 
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执行 上 面 这 段 代 码 后 ， 控 制 台 输出 错误 信息 : 
Uncaught ReferenceError: ais not defined。 


4.2.3 先 声明 后 使 用 


使 用 var 声明 变量 时 ， 可 以 先 使 用 后 声明 ， 不 会 报错 ， 而 使 用 let 声明 变量 时 ， 如 果 没 有 声明 
变量 就 使 用 ， 就 会 出 现 错误 。 例 如 下 面 这 段 代 码 : 

console.1o0g(a); 

Var a=5; 


执行 上 面 这 段 代 码 后 ， 控 制 台 输出 undefined， 说 明 虽 然 变量 a 在 使 用 之 前 并 没有 用 var 关键 
字 声 明 ， 但 是 也 可 以 正常 使 用 ， 此 时 变量 的 值 被 定义 为 undefined， 不 会 报错 。 如 果 使 用 let 声明 变 
量 ， 例 如 下 面 这 段 代码 : 


console.1log(b) 7 
let b=8; 


执行 上 面 这 段 代码 后 ， 控 制 台 输出 错误 信息 : Uncaught ReferenceError: a is not defined， 说 明 
变量 b 使 用 let 关键 字 声 明 ， 声 明 语句 在 调用 语句 之 后 ， 所 以 变量 b 在 调用 之 前 是 不 存在 的 ， 这 样 
就 出 现 了 错误 。 由 此 可 见 ， 在 ES6 中 使 用 let 声明 变量 ， 可 以 让 代码 更 加 规范 ， 避 免 出 现 过 多 不 必 
要 的 情况 。 


4.2.4 重复 变量 名 


使 用 var 声明 变量 时 ,允许 在 相同 的 作用 域 中 声明 多 个 相同 的 变量 , 但 是 后 声明 的 变量 会 覆盖 
先 声明 的 变量 。 例 如 下 面 这 段 代 码 : 

var a=10; 

var a=15; 

console.1log(a); 


执行 上 面 这 段 代码 后 ， 控 制 台 输出 15， 说 明 前 面 声明 的 变量 a 虽然 已 经 赋值 10， 但 是 在 后 面 
调用 之 前 ， 又 声明 了 一 个 相同 的 变量 a， 并 且 为 其 赋值 为 5, 这样 前 面 声明 的 变量 就 被 后 面 声 明 的 
变量 覆盖 了 ， 所 以 输出 语句 就 输出 了 后 面 的 变量 。 

与 var 关键 字 不 同 ， 使 用 let 关键 字 声 明 变量 时 ， 相 同 的 作用 域 中 不 允许 重复 声明 变量 。 例 如 
下 面 这 段 代 码 : 

let a=10; 

let a=15; 

console.1o0g(a); 


执行 上 面 这 段 代码 后 ， 控 制 台 输 出 以 下 错误 信息 : 
Uncaught SyntaxError: Identifier 'a' has already been declared 


说 明 变 量 a 已 经 在 前 面 声明 了 ， 这 里 不 能 再 重复 声明 该 变量 。 


第 4 章 ES6 基础 知识 | 51 


5. const 命令 
在 ES6 中 使 用 const 命令 声明 一 个 只 读 常 量 ， 该 常量 一 旦 声明 就 不 能 改变 , 并且 在 声明 常量 的 
同时 必须 立刻 初始 化 。 例 如 下 面 这 段 代码 : 


const PI=3.1415; 
console.1log (PI); 


使 用 const 命令 声明 了 一 个 常量 PI， 并 为 其 初始 化 值 为 3.1415， 然 后 将 其 在 控制 台 输出 。 如 果 
在 输出 之 前 重复 为 其 赋值 ， 例 如 下 面 这 段 代码 : 


const PI=3.1415; 
PI=4; 
console.1og (PI); 


这 样 控制 台 就 会 输出 以 下 错误 信息 : 
Uncaught SyntaxError: Invalid or unexpected token 


说 明 常 量 在 声明 并 初始 化 之 后 ， 它 的 值 就 不 能 再 发 生变 化 了 。 
除 此 之 外 ， 常 量 的 使 用 和 变量 的 使 用 有 一 些 相同 之 处 。 例 如 ， 常 量 只 能 在 其 声明 的 作用 域内 
有 效 ， 在 调用 常量 之 前 必须 提前 声明 常量 ， 在 同一 个 作用 域内 不 能 重复 声明 常量 。 


4.2.5 实例 : 面试 题 


小 明 去 参加 一 个 技术 面试 ， 考 官 给 了 他 一 套 考题 ， 以 下 选项 中 哪个 是 正确 的 ? 
(A) 


let m=2; 

const n=4; 

m=m*3; 

n=n*2; 
console.1og (m*n); 


输出 : 48 


(B) 


let m=2; 

for(let i=0;i<2;i++){ 
let n=m+ti; 

让 


console.log(n) 7 


(C) 


let m=2; 
if (m<5){ 
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n=2*m; 
}elsef{ 
n=3*m; 
} 
let n=3; 
console.1og (m+n); 
输出 : 4 
案例 分 析 : 这 个 面试 题 主要 考察 了 变量 声明 的 一 些 规则 。 选项 A 中 使 用 let 关键 字 声明 了 一 个 
变量 m， 使 用 const 关键 字 声 明了 一 个 常量 n， 然 后 用 乘法 分 别 更 改 m 和 n 的 值 ， 最 后 输出 m 和 n 
的 乘积 。let 声明 的 变量 值 可 以 更 改 , 但 是 const 声明 的 常量 不 能 更 改 ， 所 以 这 里 当 执 行 n=n*2 时 会 
报错 。 选 项 B 先 使 用 let 声明 了 一 个 变量 m， 然 后 执行 一 个 for 循环 ， 在 循环 内 部 又 声明 了 一 个 变 
量 n， 用 于 接收 mti 的 结果 ， 最 后 在 循环 体外 输出 变量 n。 注 意 这 里 n 的 作用 域 在 for 循环 体内 ， 
但 是 输出 命令 却 在 循环 体外 ， 所 以 跨越 了 块 级 作用 域 ， 导 致 错误 。 选 项 C 先 声 明了 一 个 变量 m， 
并 为 其 赋 初 值 2， 然 后 判断 m 的 值 ， 如 果 m 小 于 5， 就 将 2m 赋值 给 变量 n， 和 否则 将 3m 赋值 给 变 
量 a， 最 后 输出 mtn 的 和 。 看 似 没有 什么 问题 ， 但 是 声明 变量 n 的 语句 放 在 了 调用 变量 an 的 后 面 ， 
导致 变量 n 在 没有 声明 之 前 就 被 调用 ， 这 里 也 会 报错 。 所 以 这 三 个 答案 中 没有 一 个 是 正确 的 。 


4.3 ”模板 字符 串 


在 ES5 中 ,使 用 JavaScript 处 理 字符 串 经 常会 遇 到 很 多 书写 上 的 问题 ， 稍 有 不 慎 就 会 出 错 ， 或 
者 写 了 很 多 ， 看 上 去 非常 烦琐 。ES6 中 提供 了 模板 字符 串 功能 ， 可 以 很 好 地 解决 这 些 问 题 。 


4.3.1 字符 串 格式 化 
JavaScript 中 字符 串 与 表达 式 拼接 的 用 法 很 常见 ， 在 ES5 中 ， 我 们 需要 使 用 加 号 完成 字符 串 与 
表达 式 的 拼接 功能 。 例 如 下 面 这 段 代码 : 


var address='BeiJing'; 

console.log('Welcome to' + address); 

而 在 ES6 中 ， 可 以 将 表达 式 放置 在 $f 的 大 括号 中 ， 完 成 与 字符 串 的 拼接 功能 ， 例 如 下 面 这 
段 代码 : 


const address='BeiJing'; 
console.log('Welcome to ${address}'); 


在 使 用 模板 字符 囊 拼接 表达 式 的 时 候 ， 需 要 使 用 反 引号 (`) 标识 (键盘 左上 角 数 字 1 
注意 左边 的 标识 ) ， 而 不 是 单 引号 (') 标识 。 

尽 
4.3.2 ”多 行 字 符 串 


在 ES5 中 ， 如 果 要 拼接 多 行 字符 串 ， 就 需要 使 用 反 斜 杠 〈 由 ) 转 义 换行 。 例 如 下 面 这 段 代码 : 
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Var msg= "How are you? \nFine thank You. 


console.1og (msg) 7 


执行 这 段 代 码 后， 控制 台 输出 结果 如 下 : 
How are you? 


Fine thank you. 


转 义 符 (\n) 被 解析 为 换行 ， 如 果 要 输出 一 个 HTML 节点 树 ， 那 么 每 个 节点 末尾 都 需要 附加 
一 个 换行 的 转移 符 , 这 样 写 出 来 的 代码 可 读 性 很 差 。 ES6 的 模板 字符 串 功能 可 以 帮助 我 们 简化 这 一 
过 程 ， 让 代码 简单 易 懂 。 例 如 下 面 这 段 代码 : 
const htmlTreeNodes=" 
<ul> 
<li>Javascript</1i> 
<li>C++</1i> 
<li>Python</1i> 
</ul> 
console.log(htmlTreeNodes); 
执行 这 段 代码 后 ， 控 制 台 输出 结果 如 下 : 
<ul> 
<li>JavaScript</1i> 
<1i>C++</1i> 
<li>Python</1i> 
</ul> 


使 用 模板 字符 串 处 理 多 行 字符 串 ， 不 仅 轻松 解决 了 多 行 字符 串 的 换行 问题 ， 而 且 还 保留 了 多 
行 字符 串 的 缩 进 。 


4.3.3 ”运算 与 函数 调用 


模板 字符 串 中 的 变量 表达 式 ， 必 须 写 在 $ 和 大 括号 中 ， 否 则 会 出 现 错误 。 大 括号 中 可 以 写 一 个 
或 多 个 变量 ， 还 可 以 进行 变量 的 运算 。 例 如 下 面 这 段 代 码 : 

let x=2; 

let y=5; 

console.log('${x}+${y}=$ {x+y}"); 

console.log('${x}+${y*2}=${x+y*2}"); 


这 里 声明 了 两 个 变量 : x 和 y， 并 给 x 赋 初 始 值 为 2， 给 y 赋 初 始 值 为 5， 然后 通过 模板 字符 
串 在 等 式 左边 分 别 对 变量 进行 运算 , 在 等 式 右边 将 运算 的 变量 表达 式 写 在 大 括号 中 , 这 样 输出 的 结 
果 如 下 : 

2+5=7 

2+10=12 
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可 以 看 到 ， 等 式 两 边 是 成 立 的 ， 这 就 说 明 使 用 模板 字符 串 对 变量 分 别 进行 运算 ， 与 在 模板 字 
符 串 中 运算 变量 表达 式 是 完全 相等 的 。 
模板 字符 串 中 不 仅 可 以 进行 变量 运算 ， 还 可 以 调用 函数 。 例 如 下 面 这 段 代码 : 


function fn(){ 


return 'BeiJing'; 
} 
console.log('Welcome to ${fn()}.'); 


先 声明 一 个 函数 血 0, 该 函数 返回 一 个 字符 串 , 然后 使 用 模板 字符 串 将 该 函数 与 另 一 个 字符 串 
进行 拼接 , 这 样 就 完成 了 模板 字符 串 调用 函数 的 功能 。 执行 上 面 这 段 代码 后 , 控制 台 输出 结果 如 下 : 


Welcome to BeiJing. 


4.3.4 includes()、startsWith() 和 endsWith() 


在 JavaScript 中 要 查找 一 个 字符 串 是 否 包 含 另 一 个 字符 串 , 只 能 使 用 indexOf 方法 。 如 果 包 含 ， 
则 返回 该 字符 串 的 索引 位 置 ， 如 果 不 包含 ， 则 返回 -1。 现在 ES6 中 又 提供 了 以 下 三 种 新 方法 ,为 字 
符 串 的 操作 提供 了 更 多 的 便利 。 

e@ includes0: 返回 布尔 值 ， 表 示 是 否 找到 参数 字符 串 。 

。 startsWith(): 返回 布尔 值 ， 表 示 参 数字 符 串 是 否 在 原 字符 囊 的 头 部 。 

e endsWithO: 返回 布尔 值 ， 表 示 参 数字 符 串 是 否 在 原 字符 串 的 尾部 。 

通过 下 面 的 示例 可 以 清楚 地 认识 这 三 种 方法 的 使 用 。 

let msg='Welcome to BeiJing.'; 

console.log (msg.includes('to')); 


console.log(msg.startsWith('Welcome')); 
console.log(msg.endsWith('.')); 


执行 上 面 这 段 代码 后 ， 控 制 台 输 出 结果 如 下 : 
true 
true 
true 


因为 字符 串 msg 中 包含 字符 串 'to"， 所 以 第 一 个 输出 结果 为 tue; 因为 字符 串 msg 以 字符 串 
"Welcome' 开 始 ， 所 以 第 二 个 输出 为 tue; 因为 字符 串 msg 以 字符 串 '" 结 束 ， 所 以 第 三 个 输出 为 tme。 

这 三 个 方法 还 可 以 有 第 二 参数 ， 表 示 匹 配 的 索引 位 置 。 例 如 下 面 这 段 代码 : 

let msg='Welcome to BeiJing.'; 

console.log (msg.includes('to',8)); 

console.log (msg.startsWith('BeiJing',11)); 

console.log (msg.endsWith('Welcome’',7)); 


执行 上 面 这 段 代码 后 ， 控 制 台 输出 结果 如 下 : 
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true 
true 


true 


includes 和 startsWith 方法 的 第 二 个 参数 ， 均 表示 从 第 n 个 索引 位 置 开始 匹配 字符 串 ， 而 
endsWith 方法 的 第 二 个 参数 则 表示 在 前 na 个 字符 串 中 匹配 结果 。 


4.3.5 repeat() 


ES6 中 还 新 增 了 一 个 repeat0 方 法 ， 该 方法 的 功能 是 将 原来 的 字符 串 重复 n 次 后 返回 。 例 如 下 
面 这 段 代 码 : 

let msg = 'ha'; 

console.1log (msg.repeat (3)); 


执行 上 面 这 段 代码 后 ， 控 制 台 输出 结果 如 下 : 
hahaha 


需要 注意 的 是 ，repeat 方法 的 参数 不 能 是 负数 或 Infinity， 否 则 会 报错 ; 如 果 参 数 是 小 数 ， 则 会 
被 取 整 ， 如 果 参 数 是 0 或 Nan， 则 输出 一 个 空 字符 串 ， 如 果 参 数 是 字符 串 ， 则 会 被 转换 成 数字 ， 转 
换 成 功 了 ， 就 会 重复 输出 相应 的 字符 串 ， 转 换 失败 了 ， 就 会 输出 空 字符 串 。 例 如 下 面 这 段 代 码 : 

let msg='ha'; 

console.log (msg.repeat ('3')); 

console.log (msg.repeat ('HH')); 


执行 上 面 这 段 代 码 后 ， 由 于 字符 串 3' 可 以 转换 成 数字 3， 第 一 个 输出 字符 串 hahaha'， 第 二 个 字 
符 串 "HH 无 法 转换 成 数字 ， 因 此 第 二 个 输出 空 字符 串 。 


4.4 箭头 函数 


在 ES5 中 ， 定 义 一 个 函数 必须 使 用 function 关键 字 ， 其 基本 格式 如 下 : 

function functionnameO 

{ 

这 里 是 要 执行 的 代码 

} 

在 ES6 中 ,为 了 更 简洁 方便 地 定义 和 调用 函数 ， 可 以 使 用 箭头 (=>) 来 定义 函数 。 例 如 下 面 这 
段 代码 : 

const fn=(a,b)=>at+b; 

fn(3,4); 

7 


调用 函数 血 (3,4)， 输 出 结果 为 7。 该 函数 有 两 个 参数 : a 和 b， 函 数 执行 代码 是 atb， 并 将 其 
计算 结果 返回 ， 等 同 于 ES5 中 的 写法 ， 如 下 所 示 : 
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Var fn = function(a,b){ 
return af+b7 


下 


如 果 箭 头 函 数 不 需要 参数 ， 可 以 省 略 小 括号 0。 例 如 下 面 这 段 代码 : 
let Eno=()=>3-147 

fn(); 

3.14 


调用 函数 0， 输出 结果 为 3.14， 表 示 该 函数 直接 返回 一 个 具体 的 值 3.14， 没 有 任何 参数 。 这 
段 代码 等 同 于 ES5 中 的 代码 : 


var fn=function() {return 3.14}; 


箭头 函数 的 后 面 就 是 具体 的 执行 语句 ， 如 果 这 部 分 代码 多 余 一 条 语句 ， 就 需要 使 用 大 括号 将 
其 括 起 来 ， 形 成 一 个 代码 块 ， 并 用 return 语句 将 其 返回 。 例 如 下 面 这 段 代码 : 
let fn=x=>{ 
if(x>0){ 
return x*x; 
}elsef{f 
return -x*x; 
} 
} 


调用 函数 血 (6)， 输 出 结果 为 36， 调 用 函数 血 (-5)， 输 出 结果 为 -25。 如 果 去 掉 这 段 代码 中 箭头 
后 面 的 大 括号 他， 这 段 代码 就 会 报错 。 
在 ES5 中 ， 经 常 使 用 this 对 象 指向 window 对 象 ， 以 便 获 取 更 多 的 操作 ， 而 在 ES6 中 ， 如 果 
使 用 箭头 函数 ， 就 要 慎重 使 用 this 对 象 。 先 来 看 下 面 这 段 代码 : 
let name='Sean'; 
let fn=()=>{ 
return "MY name is '+this.name; 


} 
fn(); 


执行 这 段 代 码 后 ， 控 制 台 输出 My name is '， 而 我 们 期 望 它 能 正常 输出 "My name is Sean'。 这 是 
因为 在 箭头 函数 中 并 不 存在 this 对 象 ， 所 以 这 里 的 this 其 实 是 一 个 undefined 对 象 ， name 也 是 一 
个 空 值 。 如 果 想 得 到 期 望 的 值 ， 就 可 以 将 上 面 代码 中 的 this 关键 字 去 掉 ， 然 后 重新 执行 这 段 代码 
即 可 。 


4.5 ”解构 赋值 


ES6 中 新 增 了 一 种 数据 处 理 方式 ， 可 以 将 数组 和 对 象 中 的 值 提取 出 来 对 变量 进行 赋值 ， 这 个 
过 程 是 将 一 个 数据 结构 分 解 为 更 小 的 部 分 ， 称 之 为 解构 。 
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4.5.1 ”对象 解构 赋值 
在 ES5 中 ， 要 将 一 个 对 象 的 属性 提取 出 来 ， 需 要 经 过 以 下 几 个 过 程 。 


const user={ 

name:'Sean', 

age:30 
} 
const name=user.name; 
const age=user.age; 
console.log (name+'-'+age); 


先 定义 一 个 user 对 象 ， 并 为 其 name 属性 设置 值 为 'Sean'"， 为 其 age 属性 设置 值 为 30， 然 后 分 
别 定 义 name 和 age 变量 ， 从 user 对 象 中 获取 对 应 的 属性 值 给 变量 赋值 ， 最 后 将 变量 name 和 age 
的 值 输出 到 控制 台 。 这 种 做 法 在 ES5 中 是 一 种 非常 普遍 的 做 法 ， 但 是 在 ES6 中 ， 还 可 以 将 其 进 一 
步 简 化 为 下 面 这 段 代码 ; 
const user={ 
name:'Sean', 
age:30 
} 
const {name,age}=user; 
console.log('${name}-${age}'); 


将 变量 声明 在 大 括号 中 ， 直 接 将 对 象 赋值 给 这 个 声明 的 变量 ，ES6 会 根据 对 象 的 属性 名 与 变 
量 名 匹配 赋值 ， 只 有 变量 和 属性 同名 ， 才 能 正确 赋值 。 如 果 将 变量 name 修改 成 Name， 例 如 下 面 
这 段 代 码 : 


const {Name,age}=user; 


这 样 ES6 将 无 法 获取 到 对 应 属性 name 的 值 , 因为 属性 名 和 变量 名 的 首 字 母 不 同 ,此 时 的 Name 
应 该 是 undefined。 


4.5.2 ”数组 解构 赋值 


解构 另 一 个 常用 的 地 方 是 数组 ， 利 用 解构 可 以 非常 方便 地 将 数组 中 的 值 依次 赋值 给 多 个 变量 。 
例如 下 面 这 段 代码 : 

let fn=()=>["'Sean',30,'BeiJing']; 

let [name,age,address]=fn(); 

console.log('${name}-${age}-${address}'); 


这 段 代码 中 先 声明 一 个 箭头 函数 ， 该 函数 返回 一 个 数组 ， 数 组 中 有 三 个 值 ， 然 后 声明 三 个 变 
量 ， 并 将 其 放置 在 一 个 数组 中 ， 用 于 接收 箭头 函数 的 返回 值 。 执 行 这 段 代码 后 ， 控 制 台中 输出 
“Sean-30-BeiJing”， 也 就 是 说 ， 函 数 的 返回 值 依次 赋 给 了 对 应 的 变量 。 

数组 的 解构 与 对 象 的 解构 模式 不 同 ， 对 象 解构 过 程 中 ， 只 要 变量 名 和 属性 名 相同 就 可 以 解构 
成 功 , 而 数组 解构 过 程 中 ,是 根据 变量 的 顺序 依次 结构 数组 中 的 值 。 如 果 等 号 左边 数组 中 变量 的 个 
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数 大 于 等 号 右边 数组 中 值 的 个 数 ， 那 么 左边 多 余 的 变量 会 被 解构 成 undefined。 例如 下 面 这 段 代码 : 


let [name,age,address]=["'Sean',30]; 
console.log('${name}-${age}-${address}'); 


执行 这 段 代码 后 ， 控 制 台中 输出 “Sean-30-undefined”， 因 为 第 三 个 变量 address 在 数组 中 没 
有 找到 对 应 的 值 ， 所 以 输出 undefined。 

另 一 种 情况 是 ， 如 果 等 号 左边 数组 中 变量 的 个 数 小 于 等 号 右边 数组 中 值 的 个 数 ， 那 么 所 有 的 
变量 都 会 被 依次 赋值 。 例 如 下 面 这 段 代码 : 

let [name,age]=["'Sean',30,"'BeiJing']; 

console.log('${name}-${age}'); 


执行 这 段 代 码 后 ， 控 制 台中 输出 “Sean-30”。 
4.5.3 ”字符 串 解构 赋值 


因为 字符 串 是 由 一 个 个 字符 组 成 类 似 数 组 的 对 象 ， 所 以 也 可 以 对 字符 串 进行 解构 赋值 。 例 如 
下 面 这 段 代 码 : 

const [a,b,c,d,e]='hello'; 

console.log('${a}-${b}-${c}-${d}-${e}'); 


执行 这 段 代 码 后 ， 字 符 串 hello 被 分 解 成 5 个 单独 的 字符 ， 并 分 别 赋值 给 变量 a,b,c,d,e， 最 后 
控制 台 输出 结果 “bh-e-l-l-o0”。 

另外 一 个 特殊 的 解构 方式 ， 是 对 字符 串 的 长 度 属性 进行 解构 。 例 如 下 面 这 段 代 码 : 

let {length: len}='hello'; 

console.log(len); 


执行 这 段 代 码 后 ， 控 制 台中 输出 字符 串 hello" 的 长 度 5。 


4.6 Set 和 Map 数据 结构 


4.6.1 Set 数据 结构 


Set 是 ES6 中 的 一 种 新 数据 结构 ， 与 数组 有 些 类 似 ， 不 同 的 是 ， 数 据 中 的 成 员 可 以 重复 ， 而 
Set 中 的 成 员 不 能 重复 。 可 以 通过 new 关键 字 构 造 一 个 Set 对 象 ， 它 也 有 add 方法 ， 可 以 为 其 添加 
成 员 ， 列 入 下 面 这 段 代 码 : 

const set=new Set () 7 

set.add(1); 

set.add (2); 

set.add (2); 

set.add (3); 

set.add (3); 
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forl(let i of set)f{ 
console.1og(i); 


} 


执行 这 段 代码 后 ， 控 制 台 依次 输出 1,2,3。 因 为 Set 中 的 成 员 不 能 重复 ， 所 以 即使 为 其 添加 两 
次 相同 的 值 ， 最 终 也 只 能 输出 一 个 值 。 每 次 为 Set 对 象 逐个 添加 成 员 是 一 件 非常 麻烦 的 事情 ， 在 创 
建 Set 对 象 的 时 候 ， 还 可 以 通过 为 构造 函数 传递 一 个 数组 作为 参数 ， 或 者 是 一 个 具有 iterable 接口 
的 其 他 数据 结构 作为 参数 ， 这 样 就 可 以 直接 创建 出 一 个 初始 化 的 Set 对 象 。 例 如 下 面 这 段 代码 : 
const set = new Set([1,2,2,3,3,]); 
for(let i of set){ 
console.1og(i) 7 


} 


执行 这 段 代 码 后 ， 控 制 台 依然 输出 1,2,3。 由 此 可 见 ， 通 过 将 数组 作为 参数 创建 的 Set 对 象 ， 
如 果 数 组 中 有 重复 的 值 , 就 可 以 为 数组 去 除 重复 值 。Set 对 象 与 数组 比较 类 似 , 也 有 一 个 size 属性 ， 
用 于 表示 Set 对 象 中 成 员 的 数量 。 

可 以 通过 数组 创建 Set 对 象 ， 也 可 以 通过 Set 对 象 创建 数组 。 例 如 下 面 这 段 代码 : 

const set = new Set([1,2,3,4]); 

const array = Array.from(set); 

for(let i of array){ 

console.1og (i); 


} 


执行 这 段 代码 后 ， 控 制 台 依然 输出 1,2,3,4。 通 过 Array 的 from 方法 可 以 将 一 个 Set 对 象 转换 
成 Array。 


4.6.2 Set 的 基本 操作 


Set 的 基本 操作 可 以 分 为 两 类 : 一 类 是 对 Set 本 身 的 操作 ; 另 一 类 是 遍历 整个 Set 成 员 。 对 Set 
本 身 的 操作 有 以 下 4 个 。 
add(value): 添加 一 个 值 ， 返 回 Set 结构 本 身 。 
delete(value): 删除 一 个 值 ， 返 回 一 个 布尔 值 ， 表 示 删 除 是 否 成 功 。 
has(value): 返回 一 个 布尔 值 ， 表 示 该 值 是 否 为 Set 的 成 员 。 
clear0: 清除 Set 的 所 有 成 员 ， 没 有 返回 值 。 


因为 add 方法 返回 Set 结构 本 身 ， 所 以 在 添加 值 的 时 候 ， 如 果 需 要 添加 多 个 值 ， 就 可 以 连 着 写 
add 方法 。 例 如 下 面 这 段 代码 : 


const set = new Set(); 
set.add(1) 

-add(2) 

-add (3); 
for(let i of set){ 


console.1log (i); 
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} 

const hasvalue = set.has(2); 
console.log (hasvalue); 
set.delete (2); 

const hasvalue2 = set.has(2); 
console.log (hasvalue2); 


在 这 段 代码 中 ， 首 先 创建 一 个 Set， 通 过 add 方法 分 别 添加 三 个 值 ， 添 加 完成 后 将 这 些 值 依次 
输出 ;然后 通过 has 方法 判断 Set 中 是 否 存在 一 个 为 2 的 值 ， 并 输出 结果 ; 最 后 通过 delete 方法 将 
2 从 Set 中 删除 ， 再 次 通过 has 方法 判断 Set 中 是 否 存在 一 个 为 2 的 值 ， 输 出 结果 。 

对 Set 的 遍历 操作 也 有 4 个 方法 。 
keys0: 返回 键 名 的 遍历 器 。 
values0: 返回 键 值 的 遍历 器 。 
entries0: 返回 键 值 对 的 遍历 器 。 
forEachO: 使 用 回调 函数 遍历 每 个 成 员 。 


因为 Set 中 没有 键 ， 只 有 值 ， 所 以 这 里 keys 和 values 的 返回 结果 是 一 样 的 。 例如 下 面 这 段 代 码 : 


const set = new Set([1,2,3]); 
for(let i of set.keys()){ 
console.1og (i); 


} 
for(let i of set.values()){ 
console.1og (i); 


} 


执行 这 段 代 码 后 ， 控 制 台 将 输出 两 组 1,2,3， 说 明 Set 的 键 和 值 是 一 样 的 。 如 果 使 用 entries， 
将 返回 键 和 值 一 样 的 键 值 对 。 例 如 下 面 这 段 代 码 : 
for(let i of set.entries()){ 
console.1og (i); 


} 


执行 这 段 代 码 后 ， 控 制 台 将 输出 键 和 值 相 同 的 键 值 对 。 
[1,1] 
[2,2] 
[3,3] 


前 面 的 案例 中 我 们 还 使 用 过 for..of 循环 遍历 了 Set, 并 没有 指定 使 用 哪 种 遍历 操作 , 但 是 仍然 
可 以 遍历 Set， 这 是 因为 Set 默认 是 可 以 遍历 的 ， 它 的 默认 遍历 操作 就 是 values 方法 ， 所 以 在 遍历 
Set 时 可 以 直接 使 用 默认 遍历 器 。 例 如 下 面 的 代码 : 

for(let i of set){ 


console.1o0g(i); 


} 
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forEach 也 是 一 种 键 值 的 遍历 方法 ， 因 为 Set 中 没有 键 ， 只 有 值 ， 所 以 使 用 forEach 遍历 Set 也 


会 得 到 键 和 值 相等 的 结果 。 例 如 下 面 这 段 代码 : 


set.forEach ( (key, value)=>console.1log('key=$ {key};value=$ {value}; ')) 


执行 这 段 代码 后 ， 控 制 台 输出 结果 如 下 : 
key=1;value=1; 
key=2;value=2; 
key=3;value=3; 


4.6.3 扩展 运算 符 


列 。 


ES6 新 增 了 一 种 扩展 运算 符 ， 由 三 个 点 (..) 表 示 ， 用 于 将 一 个 数组 转换 成 用 逗号 分 隔 的 参数 序 
例如 下 面 这 段 代 码 : 
console.1og(...[1,2,3]); 


执行 这 段 代码 后 ， 控 制 台 将 依次 输出 1 2 3。 如 果 对 一 个 字符 串 使 用 扩展 运算 符 ， 将 会 把 字符 


串 转 换 成 一 个 字符 数组 。 例 如 下 面 这 段 代 码 : 


console.1log(...'Hello'); 


执行 这 段 代 码 后 , 控制 台 将 依次 输出 理 e110。 扩 展 运 算 符 的 内 部 实际 使 用 的 还 是 for.…of 循环 ， 


所 以 它 也 可 以 用 于 Set 结构 。 例 如 下 面 这 段 代码 : 


let set = new Set([1,2,3]); 
let array = [...set]; 
console.1log (array); 


执行 这 段 代码 后 ， 控 制 台 将 输出 [1,2,3]。 因 为 Set 结构 中 的 成 员 具 有 唯一 性 ， 所 以 可 以 结合 扩 


展 运算 符 对 多 个 Set 结构 进行 并 集 、 交 集 和 差 集 的 运算 。 例 如 下 面 这 段 代码 : 


let setA = new Set([1,2,3]); 

let setB = new Set([2,3,4]); 

let unionSet = new Set([...setA,...setB]); 
console.log(...unionSset); 

let intersectSet = new Set([...setA] .filter(x=>setB.has (x))); 
console.log(...intersectSset); 

let differenceSet = new Set([...setA].filter(x=>!setB.has (x))); 
console.log(...differenceSet)7 


执行 这 段 代 码 后 ， 控 制 台 输出 结果 如 下 : 
2 

2 

四 


这 里 先 构造 两 个 Set 结构 ， 每 个 set 都 有 三 个 值 ， 根 据 这 两 个 Set 再 构造 一 个 unionSet， 它 的 


成 员 由 前 面 两 个 Set 的 扩展 表达 式 组 成 。 这 两 个 Set 合并 后 有 重复 的 数据 2 和 3， 因 为 Set 中 的 成 
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员 不 能 重复 ， 所 以 这 里 合并 后 只 会 有 一 个 2 和 3， 输 出 结果 就 是 1 2 3 4。 第 二 个 交集 intersectSet 
同样 是 由 前 面 两 个 Set 构造 而 成 ， 这 里 运用 了 扩展 表达 式 和 filter 方法 ， 以 及 Set 的 has 方法 ， 用 于 
从 两 个 Set 中 筛选 出 共有 的 值 2 和 3， 输 出 结果 就 是 2 3。 第 三 个 差 集 differenceSet 与 第 二 个 并 集 
intersectSet 在 筛选 结果 的 过 程 中 正好 相反 ， 输 出 结果 是 1 。 


4.6.4 ”Map 数据 结构 


ES6 新 增 了 Map 数据 结构 ， 类 似 于 对 象 Object， 同 样 是 键 值 对 的 组 合 ， 但 与 对 象 双 有 所 区 别 。 
对 象 的 键 仅 限 于 字符 串 ， 而 Map 的 键 不 仅 可 以 是 字符 串 ， 还 可 以 是 其 他 任何 类 型 ， 这 就 非常 方便 
地 扩展 了 集合 的 应 用 。Map 与 Set 的 操作 基本 相同 ， 都 是 通过 构造 方法 创建 的 。 在 构造 时 ， 可 以 通 
过 接收 一 个 数组 参数 来 表示 成 员 的 键 和 值 , 如 果 不 带 参 数 , 就 需要 通过 set 方法 添加 成 员 的 键 和 值 。 
也 可 以 通过 delete 方法 删除 Map 中 的 成 员 ， 通 过 has 方法 判断 某 一 个 成 员 是 否 属于 Map。 例 如 下 
面 这 段 代 码 : 

const mapA = new Map(); 

const obj = {name: 'Sean'}; 

mapA.set (obj, 'student'); 

console.1log (mapA.get (obj)); 

console.1log (mapA.has (obj)); 

mapA.delete (obj); 

console.1og (mapA.has (obj)); 

执行 这 段 代码 后 ， 控 制 台 输出 结果 如 下 : 


student 


true 
false 


这 段 代码 中 先 构造 了 一 个 Map， 变 量 名 为 mapA， 接 着 创建 了 一 个 对 象 obj， 这 个 对 象 中 有 一 个 
属性 name， 值 为 Sean， 通 过 Map 的 set 方法 将 对 象 obj 设置 为 键 ， 值 为 student， 添 加 到 mapA 中 ， 
通过 Map 的 get 方法 获取 键 名 为 obj 的 值 并 输出 ， 此 时 的 键 是 一 个 对 象 ， 但 是 它 的 值 是 student， 所 
以 第 一 行 输出 是 一 个 字符 串 student; 然后 通过 Map 的 has 方法 ， 判 断 mapA 中 是 否 存在 键 名 为 obj 
的 值 ， 如 果 存 在 则 输出 tue， 否 则 输出 false， 所 以 第 二 行 输出 一 个 tue; 最 后 通过 Map 的 delete 方 
法 将 键 名 为 obj 的 成 员 删 除 ， 再 通过 has 方法 判断 这 个 键 是 否 存 在 并 输出 结果 ， 最 终 输 出 一 个 false。 

在 构造 Map 时 , 通过 接收 一 个 数组 作为 参数 ,构造 出 具有 键 和 值 的 Map。 例如 下 面 这 段 代码 : 

const mapB = new Map([ 

['name','Sean'], 
['age',20] 

1); 

console.log (mapB.size); 

console.1log (mapB.has ('name')); 

console.log (mapB.get ('name')); 

console.log (mapB.has ('age')); 


console.log (mapB.get ('age')); 
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执行 这 段 代码 后 ， 控 制 台 输出 结果 如 下 : 


Map 中 的 键 具有 唯一 性 , 如 果 多 次 为 Map 添加 相同 的 键 , 那么 后 添加 的 值 将 会 覆盖 前 面 的 值 。 
当 读 取 的 键 在 Map 中 不 存在 时 ， 将 获取 到 undefined 结果 。 例 如 下 面 这 段 代码 : 
const mapC = new Map(); 
mapC.set ('name','Sean') 
.Set('name', 'Anna'); 
console.1og (mapC.get ('name')); 
console.1log (mapC.get ('age')); 


执行 这 段 代码 后 ， 控 制 台 输 出 结果 如 下 : 
Anna 
undefined 


构造 一 个 Map 结构 mapC 后 ， 两 次 为 其 添加 相同 的 键 ， 不 同 的 值 ， 最 后 输出 的 时 候 只 能 获取 
最 后 一 个 添加 的 值 ， 而 第 二 个 键 age' 在 mapC 中 并 不 存在 ， 所 以 就 返回 了 undefined。 


4.6.5 ”Map 遍历 方法 


Map 的 遍历 方法 与 Set 的 遍历 方法 相同 ， 都 可 以 通过 keys0、values0、entriesO0、forEachO 和 
扩展 运算 符 (…) 进 行 遍历 。 例 如 下 面 这 段 代 码 : 
const map = new Map([ 
['name', 'Sean'], 
["'age',20] 
Ty 
for (let key of map.keys()){ 
console.1log (key); 


} 
这 段 代码 只 输出 Map 的 键 名 ， 输 出 结果 如 下 : 


name 

age 

如 果 换 成 输出 Map 的 值 ， 那 么 代码 如 下 : 
for (let value of map.values()){ 


console.1log (value); 


| 
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执行 这 段 代码 后 ， 输 出 结果 如 下 : 
Sean 
20 


如 果 要 将 键 和 值 都 输出 ， 就 可 以 使 用 以 下 两 种 输出 方法 : 
for (let item of map.entries()){ 
console.1log (item); 
} 
for (let [key,value] of map.entries()){ 
console.1og (key, value); 


} 

执行 这 段 代码 后 ， 输 出 结果 如 下 : 
["name", "Sean"] 

["age",20] 

name Sean 

age 20 


以 上 的 for.of 循环 可 以 用 扩展 运算 符 蔡 代 。 例 如 下 面 的 代码 : 
. .map.keys()]; 

.-.map.values()]; 

..map.entries()]; 

.map]; 


4.7 ” Promise 对象 


4.7.1 Promise 简介 


Promise 直译 过 来 就 是 承诺 的 意思 ， 如 果 有 人 承诺 了 要 做 某 事 ， 他 就 一 定 要 去 做 。ES6 中 的 
Promise 对 象 是 一 种 异步 编程 的 解决 方案 ， 以 往 在 JavaScript 中 ， 都 需要 回调 函数 和 事件 来 解决 异 
步 编 程 的 问题 ， 函 数 一 个 套 一 个 非常 烦琐 ， 程 序 编写 麻烦 ， 可 读 性 差 ， 维 护 也 很 不 方便 。Promise 
很 好 地 解决 了 这 个 问题 ， 它 提供 了 统一 的 API， 用 于 获取 异步 操作 的 结果 。 

Promise 对 象 有 三 种 状态 , 分 别 是 pending (进行 中 )、flfilled (已 成 功 ) 和 rejected (已 失败 ) ， 
异步 操作 完成 后 ， 就 可 以 确定 当前 Promise 对 象 的 状态 ， 该 状态 一 旦 确定 就 无 法 再 更 改 。Promise 
对 象 的 状态 只 能 从 pending 变 为 fulfilled， 调 用 resolve0 方 法 将 该 实例 的 状态 设置 为 fnlfilled， 或 者 
从 pending 变 为 rejected， 调 用 reject0 方 法 将 该 实例 的 状态 设置 为 rejected。 

简单 概括 地 讲 ，Promise 就 是 处 理 异步 操作 ， 异 步 处 理 成 功 了 就 执行 成 功 的 操作 resolve0， 异 
步 处 理 失 败 了 就 捕获 错误 或 者 停止 后 续 操 作 rejectO。 
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4.7.2 创建 Promise 对 象 


Promise 对 象 可 以 通过 构造 函数 创建 , 它 接收 一 个 函数 作为 参数 , 这 个 函数 有 两 个 参数 : resolve 
和 reject， 分 别 用 于 处 理 异步 操作 成 功 和 失败 。Promise 的 一 般 表示 形式 如 下 : 
new Promise( 
/* executor */ 
function (resolve, reject) { 
if (/* success */) { 
// . . .执行 代码 
resolve () 7 
} else { /* fail */ 
// -执行 代码 


rejectuy 


) 7 


在 构造 Promise 对 象 的 时 候 ， 执 行 函数 executor 作为 构造 函数 的 参数 ， 它 有 两 个 参数 : resolve 
和 reject。 如 果 异 步 操 作成 功 ， 执 行 完 必要 的 操作 后 ， 调 用 resolve0 方 法 就 将 Promise 对 象 的 状态 
设置 为 fulfilled， 表 示 已 完成 ， 如 果 异 步 操作 失败 ， 执 行 完 必要 的 操作 之 后 ， 调 用 reject0 方 法 就 将 
Promise 对 象 的 状态 设置 为 rejected， 表 示 已 失败 。 


4.7.3 then() 


Promise 对 象 有 一 个 then0 方 法 ， 用 于 返回 一 个 Promise 对 象 。 它 接收 两 个 参数 : 第 一 个 是 处 
理 成 功 后 的 参数 ， 第 二 个 是 处 理 失败 后 的 参数 。 由 于 Promise 对 象 的 then0 方 法 返回 一 个 Promise 
对 象 ， 因 此 它 可 以 进行 链 式 调用 。 下 面 是 一 个 then 方法 调用 的 例子 ， 代 码 如 下 : 
const promise = new Promisel( (resolve,reject)=>{ 
setTimeout (()=>{ 
resolve('success'); 
+2000); 
Ds; 
promise.then( (data)=>{ 
console.1log(data); 
}, (err)=>{ 
console.1log (err); 
}) .then( (data)=>{ 
console .1o0g(' 链 式 调用 : ${data}'); 
2 


在 这 段 代码 中 , 先 构造 一 个 Promise 对 象 并 设置 一 个 计时 器 , 两 秒 之 后 返回 一 个 成 功 的 字符 串 
success， 然 后 调用 then 方法 ， 在 异步 成 功 的 函数 中 输出 返回 的 字符 串 success， 在 异步 失败 的 函数 
中 返回 错误 信息 ， 继 续 调用 then 方法 ， 在 异步 成 功 的 函数 中 输出 特定 的 文字 。 
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执行 这 段 代码 后 ， 首 先 暂 停 两 秒 钟 ， 然 后 输出 _ success， 紧 接着 输出 文字 信息 ' 链 式 调用 : 
undefined'。 在 第 二 个 then 的 链 式 调用 中 ， 这 里 的 参数 data 是 一 个 undefined 对 象 ， 因 为 在 第 一 个 
then 方法 中 ， 异 步 执行 成 功 之 后 ， 仅 仅 是 输出 了 resolve 返回 的 信息 ， 没 有 将 其 他 信息 继续 返回 ， 
在 第 二 个 then 方法 中 并 没有 接收 到 任何 参数 信息 ， 所 以 这 里 的 参数 就 是 一 个 undefined 对 象 。 

注意 这 里 第 一 个 then 方法 的 第 二 个 函数 不 会 执行 ， 因 为 在 构造 Promise 对 象 的 时 候 执行 了 
resolve 方法 ， 这 是 异步 调用 成 功 的 方法 ， 所 以 在 下 面 的 then 方法 中 只 会 执行 第 一 个 函数 。 如 果 在 
构造 Promise 对 象 的 时 候 调 用 了 reject 方法， 那么 在 下 面 的 then 方法 中 将 执行 第 二 个 函数 。 


4.7.4 catch() 


catch 方法 也 会 返回 一 个 Promise 对 象 , 它 可 以 和 then 方法 组 成 链 式 调用 。catch 方法 主要 用 于 
处 理 Promise 对 象 状态 为 rejected 的 信息 ， 以 及 程序 运行 过 程 中 的 异常 信息 ， 所 以 在 使 用 then 方法 
的 时 候 ， 通 常 仅 指定 一 个 参数 ， 而 省 略 第 二 个 参数 ， 将 程序 中 所 有 的 错误 全 部 放 到 catch 中 进行 处 
理 。 下 面 是 一 个 catch 方法 捕获 rejected 状态 的 情况 ， 代 码 如 下 : 

const promise = new Promisel( (resolve,reject)=>{ 

setTimeout (()=>{ 
reject ('reject'); 
},2000); 

Hs 

promise.then( (data)=>{ 

console.log('success:${data}'); 

}) .catch ( (err)=>{ 

console.1og(' 错 误 : ${err}'); 

Ds; 


这 段 代码 中 , 在 构造 Promise 对 象 的 时 候 , 使 用 了 reject 方 法 , 所 以 这 里 catch 的 信息 就 是 reject 
方法 返回 的 信息 。 执 行 这 段 代码 后 ， 暂 停 两 秒 ， 输 出 如 下 信息 : 
错误 : reject 


4.7.5 Promise.all() 


Promise 的 all 方法 接收 一 个 参数 ， 该 参数 可 以 是 数组 或 对 象 ， 但 必须 具有 Iterator 接口 。 只 有 
当 数 组 或 对 象 中 所 有 元 素 的 状态 都 变 成 flfilled 的 时 候 ，Promise 的 状态 才能 是 falfilled。 相 反 ， 只 
要 数组 或 对 象 中 一 个 元 素 的 状态 变 成 rejected，Promise 的 状态 就 会 变 成 rejected。 例 如 下 面 这 段 
代码 : 
Var arr = {le 2 3 
Var promises = arr.map (function(e) { 
return new Promise(function(resolve, reject) { 
resolvete * 2)3 
Fs 
D); 


Promise.all (promises) .then(function(data) { 
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console.log(data); 
console.log (arr); 


by 
执行 这 段 代码 后 ， 首 先 输出 [2,4,6]， 然 后 输出 [1,2,3]。 
4.7.6 Promise.race() 


Promise.race() 和 Promise.all0 比 较 类 似 ， 不 同 的 是 Promise.race 中 只 要 有 一 个 改变 了 状态 ， 
Promise 实例 的 状态 就 会 跟着 改变 ， 它 的 返回 值 也 会 传递 到 回调 函数 中 。 下 面 这 段 代 码 演示 了 
Promise.race 的 效果 : 


const pl = new Promise( (resolve, reject)=>{ 
setTimeout (resolve, 100, 'P1 fulfilled'); 

Ds; 

const p2 = new Promisel( (resolve,reject)=>{ 
setTimeout (resolve, 50, 'P2 fulfilled'); 

Fs 

const p3 = new Promisel( (resolve,reject)=>{ 
setTimeout (reject,150,'P1 rejected'); 

Ds; 

Promise.race([pl,p2,p3]) .then( (data)=>{ 
console.1log(data); 

}) .catch ( (err)=>{ 
console.1log (err); 

1D); 


在 这 段 代码 中 ,pl1、p2 和 p3 分 别 是 三 个 Promise 对 象 ，p2 调用 setTimeout 的 时 间 最 短 ， 所 以 
它 的 状态 最 先 改变 ， 最 终 Promise 对 象 的 状态 就 被 设置 成 了 fulfilled， 并 且 接 收 p2 返回 的 值 。 最 终 
输出 结果 如 下 : 

P2 fulfilled 


4.7.7 Promise.resolve() 


Promise.resolve 方法 用 于 将 现 有 的 对 象 转换 成 Promise 对 象 ， 它 的 参数 有 以 下 4 种 情况 。 


(1) 参数 是 一 个 Promise 实例 

在 这 种 情况 下 ，resolve 方法 不 做 任何 更 改 ， 直 接 返 回 这 个 实例 。 

(2) 参数 是 一 个 thenanble 对 象 
thenable 对 象 是 指 具 有 then 方法 的 对 象 。 例 如 下 面 这 段 代码 : 

const thenable = { 

then: (resolve,reject)=>resolve(42) 
}; 
Promise.resolve 方法 会 先 将 thenable 对 象 转 为 Promise 对 象 ， 然 后 立即 执行 thenable 对 象 中 的 
then 方法。 例如 下 面 这 段 代 码 : 
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const promise = Promise.resolve (thenable); 
promise.then( (value)=>console.log (value)); 
上 面 这 段 代码 执行 resolve 方法 后 ， 立 即 执行 thenable 对 象 中 的 then 方法 ， 将 promise 对 象 状 
态 变 为 resolved 并 放 回 42， 然 后 执行 promise 对 象 的 then 方法 ， 接 收 到 这 个 返回 值 并 输出 。 
(3 ) 参数 是 一 个 一 般 对 象 
如 果 参 数 是 一 个 一 般 对 象 ( 指 原始 值 或 不 具有 then 方法 的 对 象 ) 原始 值 ， 那 么 Promise .resolve 
方法 将 返回 一 个 新 的 Promise 对 象 ， 并 将 其 状态 设置 为 resolved。 例 如 下 面 这 段 代码 : 
const promise = Promise.resolve(2018); 
promise.then( (data)=>console.1og (data)); 
执行 这 段 代码 后 ， 将 输出 2018。 
(4) 没有 参数 
如 果 不 带 任何 参数 ， 就 执行 Promise resolve 方法 ， 将 直接 放 回 一 个 新 的 Promise 对 象 。 例 如 下 
面 这 段 代 码 : 


const promise = Promise.resolve(); 


执行 这 段 代码 后 ， 将 生成 一 个 新 的 Promise 对 象 。 


4.7.8 Promise.reject() 


Promise.reject0 和 Promise.resolve0 正 好 相反 ， 它 接收 一 个 参数 值 reason， 即 发 生 异常 的 原因 。 
此 时 返回 的 Promise 对 象 将 会 置 为 rejected。 例 如 下 面 这 段 代码 : 
const promise = Promise.reject('error'); 
promise.then(null, function (data) { 
console.1log (data) 
Ds; 


执行 这 段 代 码 后 ， 直 接 输 出 error 信息 。 
4.8 ”for...of 循环 


ES6 中 新 增 了 for.…of 循环 ， 为 可 遍历 的 数据 结构 提供 统一 的 遍历 方法 。 例 如 有 下 面 这 样 一 个 
数组 : 


const arr=['BeiJing','ShangHai','HangZzhou']; 
forl(let V of arr){ 
console.1log(v); 


|， 
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执行 这 段 代 码 后 ， 控 制 台 输 出 以 下 结果 : 
BeiJing 

ShangHai 

HangZzhou 


for..of 循环 之 所 以 能 够 循环 遍历 数组 中 的 成 员 ， 这 是 因为 数组 具有 Iterator 接口 ， 所 有 具有 这 
个 接口 的 集合 数组 都 能 使 用 for..of 进行 遍历 。 在 ES6 中 ， 能 够 使 用 for..of 循环 进行 遍历 的 集合 
据 还 有 Map、Set、String 等 。 

Iterator 实际 上 是 一 个 遍历 器 ， 它 为 集合 数据 提供 了 统一 的 遍历 操作 ， 其 内 部 是 一 个 指针 操作 ， 
当 第 一 次 调用 next 方法 时 ， 指 针 会 指向 数据 结构 的 起 始 位 置 ， 再 次 调用 next 方法 时 ， 指 针 会 指向 
数据 结构 的 第 一 个 成 员 ， 依 次 调用 next 方法 ， 指 针 会 依次 移动 到 下 一 个 成 员 ， 直 到 数据 结构 的 结 
束 位 置 为 止 。 对 于 初学 者 而 言 ， 只 需要 掌握 for...of 循环 操作 的 方法 即 可 。 


4.9 Generator 函数 


前 面 提 到 过 Promise 对 象 ， 用 于 处 理 异步 操作 ， 在 ES6 中 还 提供 了 Generator 函数 ， 同 样 是 处 
理 异步 操作 的 解决 方案 。Promise 对 象 在 处 理 异步 操作 时 与 传统 的 异步 操作 有 些 类 似 ， 操 作成 功 时 
执行 一 种 操作 , 失败 时 执行 男 一 种 操作 ,但 是 在 Generator 函数 中 ,可 以 依次 执行 多 个 操作 。Generator 
函数 的 声明 格式 如 下 : 
function* addresses (){ 
yield 'BeiJing'; 
yield "ShangHai'7 
return 'NanJing'; 
} 


const fun=addresses () 7 

function 是 关键 字 ，addresses 是 函数 名 ， 关 键 字 与 函数 名 之 间 有 一 个 星 号 ,函数 体 内 可 以 有 多 
个 yield 表达 式 , 每 一 个 表达 式 都 可 以 返回 一 个 状态 信息 。 创 建 一 个 Generator 函数 后 ， 其 调用 方式 
与 一 般 函 数 相同 ， 都 是 函数 名 后 面 带 一 个 小 括号 ,但 此 时 并 没有 实际 执行 函数 体内 的 代码 ， 而 是 需 
要 调用 遍历 器 的 next 方法 ， 让 指针 移动 到 下 一 个 状态 。 例 如 现在 执行 fon.next0， 控 制 台 输出 结果 
如 下 : 


Object {value: "BeiJing", done: false} 


再 次 执行 fun.next0， 控 制 台 继续 输出 : 


Object {value: "ShangHai", done: false} 


再 次 执行 fun.next0， 控 制 台 继续 输出 : 


Object {value: "NanJing", done: true} 
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可 以 看 到 ， 每 次 调用 一 个 next 方法， 函数 体 都 会 从 上 往 下 执行 ， 遇 到 yield 表达 式 或 retum 语 
名 就 会 停止 执行 ， 直 到 函数 体 的 结束 位 置 。 每 个 yield 表达 式 都 会 输出 一 个 对 象 ， 该 对 象 中 的 value 
属性 值 就 是 返回 的 值 , 而 done 属性 则 表示 指针 是 否 移动 到 结束 位 置 。 如 果 函 数 中 所 有 的 yield 表达 
式 和 retum 语句 都 已 经 返回 了 值 ， 此 时 继续 执行 next 方法 ， 就 会 输出 一 个 值 为 未 定义 的 对 象 ， 如 
下 所 示 : 


Object {value: undefined, done: true} 


Generator 函数 的 这 种 分 段 执 行 的 特性 ， 可 以 帮助 我 们 解决 多 个 异步 操作 的 问题 。 


4.10 ”async 函数 


JavaScript 的 发 展 一 直 在 致力 于 解决 异步 调用 的 问题 , 前 面 介 绍 的 Promise 和 Generator 都 是 为 
了 让 异步 调用 的 代码 更 简单 ， 更 方便 。 而 新 加 入 的 asyne 函数 ， 更 是 让 异步 调用 的 操作 更 趋 于 同步 
操作 。 
asynec 函数 与 Generator 函数 的 最 大 区 别 是 ，asyne 函数 声明 中 没有 星 号 ， 而 是 多 了 一 个 async 
关键 字 ， 函 数 体 中 没有 yield 表达 式 ， 而 换 成 了 await。 另 外 ，async 函数 的 执行 不 再 需要 调用 next 
方法 ， 而 是 直接 调用 函数 名 ， 并 且 asynec 函数 返回 一 个 Promise 对 象 ， 可 以 使 用 then 和 catch 来 处 
理 回 调 操作 。 例 如 下 面 这 段 代 码 : 
async function getAddress(name) { 
await console.log('${name}-A'); 
await console.log('${name}-B'); 
await console.log('${name}-C'); 


} 

getAddress('BeiJing') .then( (result)=> { 
console.log (result); 

}) .catch ( (err)=>{ 
console.1log (err) 


}) 


这 上 段 代码 中 先 声明 了 一 个 asyne 函数 ， 函 数 体 中 有 三 个 await 表达 式 ， 每 个 表达 式 都 对 应 输出 
一 个 字符 串 , 当 函 数 执行 到 对 应 的 await 表达 式 时 , 会 先 返回 一 个 Promise 对 象 , 然后 执行 异步 then 
操作 , 待 异步 操作 完成 后 继续 执行 asyne 函数 体 中 的 代码 ， 遇 到 下 一 个 await 后 继续 等 待 异 步 操作 。 
执行 以 上 代码 后 ， 控 制 台 输出 如 下 内 容 : 

BeiJing-A 

BeiJing-B 

BeiJing-C 
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4.11 class 


有 过 java 或 .net 编程 经 验 的 读者 对 class 类) 应 该 不 会 陌生 ， 在 ES6， 使 用 class 关键 字 也 可 
以 定义 一 个 类 ， 使 用 class 就 可 以 创建 对 象 。 例 如 下 面 这 段 代码 : 
class UserInfo{ 
constructor (name,age){ 
this.name=name; 
this.age=age; 
} 
getUserName () { 
return this.name; 
i 
getUserRge (){ 
return this.age; 
} 
} 


上 面 这 段 代码 中 使 用 class 关键 字 定义 了 一 个 名 为 UserInfo 的 类 , 该 类 中 的 构造 方法 constructor 
将 在 实例 化 这 个 对 象 时 被 调用 , 可 以 将 构造 方法 的 参数 传递 到 类 的 内 部 。 类 中 this 表示 当前 类 的 实 
例 ， 通 常情 况 下 ， 为 了 初始 化 数据 ， 会 在 构造 函数 实例 化 时 为 其 赋值 。 另 外 ， 这 个 类 中 还 定义 了 两 
个 方法 ， 分 别 用 于 对 外 提供 name 和 age 的 两 个 属性 的 值 。 

可 以 先 使 用 new 关键 字 生 成 类 的 一 个 实例 ， 然 后 才能 执行 其 他 操作 。 如 果 没 写 构造 方法 ， 
JavaScript 引擎 就 会 自动 为 其 添加 一 个 空 的 constructor 方法 。 有 了 类 的 实例 ， 就 可 以 直接 调用 类 内 
部 的 方法 。 例 如 下 面 这 段 代码 : 

let userInfo=new UserInfo('Sean',20); 

let userName=userInfo.getUserName (); 

let userAge=userInfo.getUserAge(); 

console.log('User name is ${userName}, user age is ${userAge}.'); 


执行 这 段 代 码 后 ， 控 制 台 输出 如 下 结果 : 


User name is Sean, user age is 20. 


需要 注意 的 是 ， 之 前 定义 一 个 JavaScript 方法 时 都 需要 用 到 function 关键 字 ， 现 在 在 类 中 定义 
方法 时 ， 就 不 需要 使 用 function 关键 字 了 。 

类 是 可 以 继承 的 ， 通 过 关键 字 extends 可 以 实现 类 的 继承 。 继 承 的 类 叫 作 子 类 ， 被 继承 的 类 叫 
作 父 类 ， 子 类 可 以 继承 父 类 中 的 方法 和 属性 。 例 如 下 面 这 段 代码 : 

class BeiJingPerson extends UserInfo{} 


let userInfo=new BeiJingPerson('Dora',20); 
let userName=userInfo.getUserName (); 
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let UserRAge=userInfo.getUserRge () 7 


console.log('User name is ${userName}, user age is ${userAge}'); 


因为 子 类 BeiJingPerson 继承 了 父 类 UserInfo, 所 以 实例 化 一 个 子 类 对 象 userinfo 就 可 以 通过 子 
类 对 象 调用 父 类 的 方法 。 执 行 这 段 代 码 后 ， 控 制 台 输出 以 下 结果 : 


User name is Dora, user age is 20 


4.12 实例 : 下 馆子 吃饭 


想必 大 家 都 在 饭馆 吃 过 饭 ， 回 想 一 下 这 个 过 程 。 如 果 当 时 客人 比较 多 ， 我 们 点 餐 后 不 可 能 立 
即 就 给 我 们 做 , 而 是 需要 先 下 单 ， 然后 等 待 , 在 等 待 的 这 段 时 间 内 , 大 家 通常 都 会 拿 出 手机 看 新 闻 ， 
或 玩 游戏 ， 用 于 消磨 等 待 的 时 间 。 等 竺 和 玩 游戏 消磨 时 间 是 同时 发 生 的 事情 ， 我 们 可 以 用 异步 来 描 
述 这 个 过 程 。 

首先 明确 这 里 应 该 有 两 个 异步 执行 的 操作 ， 一 个 是 等 待 ， 另 一 个 玩 游戏 ， 所 以 应 该 有 两 个 
function， 一 个 叫 作 Waiting， 另 一 个 叫 作 PlayingGame。 我 们 使 用 asyne 函数 对 这 两 个 操作 执行 异 
步 处 理 ， 相 关 代码 如 下 : 

async function Main() { 


console.1og(' 客 人 点 餐 ...')7 
await PlayingGame () 7 
await Waiting(); 


} 


在 等 待 的 过 程 中 ， 客 人 会 时 不 时 地 看 一 眼 服务 员 或 厨师 ， 如 果 等 待 的 时 间 过 长 ， 客 人 就 会 烦 
躁 ， 但 不 管 怎样 ， 最 终 还 是 会 上 菜 的 。 因 为 在 等 待 的 过 程 中 ， 客 人 还 在 玩 游戏 ， 所 以 这 些 操 作 也 是 
异步 执行 的 。 相 关 代码 如 下 : 
async function Waiting() { 
await setTimeout(()=>{ 
console.1log(' 客 人 看 了 一 眼 服务 员 . . . ') ; 
},2000); 
await setTimeout(()=>{ 
console.1og("' 客 人 看 了 一 眼 厨 师 . . . ') 7 
},4000); 
await setTimeout(()=>{ 
console.1log(' 客 人 等 得 不 耐烦 了 ...'); 
},6000); 
await setTimeout(()=>{ 
console.10og(' 饭 终于 好 了 ...'); 
},8000); 
} 


再 来 看 玩 游戏 的 过 程 ， 假 设 客人 打通 游戏 第 5 关 后 ， 饭 就 上 桌 了 。 因 为 在 玩 游戏 的 过 程 中 ， 
客人 还 时 不 时 地 看 看 饭 有 没有 好 ， 所 以 玩 游戏 也 不 是 很 专注 ， 这 里 也 用 异步 处 理 。 相 关 代码 如 下 : 
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async function PlayingGame() { 
console.10g(' 拿 出 手机 开始 玩 游戏 . . . ') ; 
for (let i = 0; i < 57 i++) 
{ 
await setTimeout(()=>{ 
console .1og (' 打 通 游戏 第 ${i+1} 关 ...'); 
i1000# (+1) Ys 
} 
await setTimeout(()=>{ 
console.1o0g(' 退 出 游戏 ， 收 起 手机 ..."'); 
},6000); 
} 
最 后 执行 Main 方法 。 
Main() 
控制 台 输出 以 下 结果 : 
客人 点 餐 .. . 
拿 出 手机 开始 玩 游戏 .. . 
打通 游戏 第 1 关 . .. 
打通 游戏 第 2 关 .. . 
客人 看 了 一 眼 服务 员 ... 
打通 游戏 第 3 关 ... 
打通 游戏 第 4 关 ... 
客人 看 了 一 眼 厨 师 .. . 
打通 游戏 第 5 关 . .. 
退出 游戏 ， 收 起 手机 . . - 
客人 等 得 不 耐烦 了 . . . 
饭 终于 好 了 .. . 


测试 题 

(1) 什么 是 块 级 作用 域 ? 

(2) 在 声明 变量 时 ，var、let 和 const 有 什么 区 别 ? 

(3) Promise 对 象 的 两 个 参数 分 别 是 什么 ? 

(4) 使 用 asyne 函数 的 时 候 ， 函 数 体 内 必须 有 什么 关键 字 ? 


4.13 本章 小 结 


本 章 主要 介绍 了 ES6 的 一 些 新 知识 ， 其 中 包括 声明 变量 、 模 板 字符 串 、 箭 头 函 数 、 解 构 赋值 、 
Set 和 Map 数据 结构 、Promise 对 象 、for...of 循环 、Generator 函数 、async 函数 、class 等 ， 熟 练 掌 
握 ES6 的 这 些 新 知识 ， 对 以 后 成 为 一 个 出 色 的 程序 员 将 有 很 大 的 帮助 。 


HTML5 音频 和 视频 


在 HIML4 中 ， 如 果 在 网 页 中 展示 音频 或 视频 ， 则 需要 使 用 第 三 方 插件 或 Flash 工具 ， 而 且 浏 
览 器 必须 安装 插件 才能 播放 , 而 在 HTML5 中 , 提供 了 音频 和 视频 的 播放 接口 ,只 要 支持 HIMLS 的 
浏览 器 都 可 以 直接 进行 播放 。 这 个 强大 的 功能 要 归功 于 video 元 素 和 audio 元 素 ， 本 章 将 详细 介绍 


这 两 个 元 素 的 使 用 方法 。 


5.1 Web 视频 的 标准 与 格式 


目前 ，video 元 素 支 持 三 种 视频 格式 ， 分 别 为 Ogg、MPEG4 和 WebM; audio 元 素 支持 三 种 音 
频 格式 ， 分 别 为 Ogg Vorbis、MP3 和 Wav。 由 于 各 浏览 器 对 HIML5 支持 的 程度 不 同 ， 因 此 不 同 
浏览 器 的 不 同 版 本 对 video 元 素 和 audio 元 素 的 支持 程度 也 不 同 ， 详 见 下 表 。 


Ogg 
MPEG 4 9.0+ 3.0+ 
WebM No No 
Ogg Vorbis No No 
MP3 9.0+ 3.0+ 


Wav 


Ogg 表示 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 ; MPEG 4 表示 带 有 H.264 
二 。 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 ，WebM 表示 带 有 VP8 视频 编码 和 Vorbis 
提 示 。 音频 编码 的 WebM 文件 。 
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5.2 video/audio 元 素 概述 


video 元 素 用 于 在 HTMLS5 中 播放 视频 文件 ，audio 元 素 用 于 在 HTML5 中 播放 音频 文件 。 这 两 
个 元 素 都 有 一 个 sre 和 controls 属性 ， 其 中 src 属性 用 于 指定 文件 的 地 址 ，controls 属性 提供 一 个 用 
于 播放 、 和 暂停 、 音 量 、 播 放 进度 条 、 播 放 时 间 和 是 否 全 屏 的 控件 ， 开 始 和 结束 标签 之 间 的 文字 用 于 
当 浏 览 器 不 支持 时 需要 显示 的 内 容 。 

在 HTML5 中 播放 音频 的 代码 如 下 : 

<audiosrc="song.o0gg" controls="controls"> 


您 的 浏览 器 不 支持 video 播放 。 


</audio> 


在 HIML5 中 播放 视频 的 代码 如 下 : 
<video src="movie.mp4" controls="controls"> 


您 的 浏览 器 不 支持 video 播放 。 


</video> 


5.3 ”检测 浏览 器 是 否 支持 HTML5 视频 


目前 , 可 供 选择 的 浏览 器 有 很 多 , 而 且 不 同 浏览 器 的 不 同 版 本 对 HIMLS 视频 的 支持 也 不 一 样 ， 
如 何 才 能 知道 使 用 的 浏览 器 支持 HTMLS5 视频 播放 呢 ? 下 面 分 别 介绍 检测 浏览 器 是 否 支持 HTML5 
视频 的 方法 。 
新 建 一 个 HIML5 文档 ， 将 下 面 这 段 代 码 复制 到 HIMLS 文档 中 ， 利 用 浏览 器 打开 这 个 文档 ， 
单 击 检测 按钮 即 可 显示 浏览 器 是 否 支持 HTML5 视频 播放 。 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script type="text/javascript"> 
function checkVideo(){ 
if(!!document.createElement ('video') .canPlayType) { 
Var vidTest=document .createElement ("video"); 
oggTest=vidTest .canPlayType ('video/ogg; codecs="theora, vorbis"'); 
if (!oggTest) { 
h264Test=vidTest .canPlayType('video/mp4; codecs="avcl .42E01E, 
mp4a.40.2"")7 
if (!h264Test) { 
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document .getElementBYId("checkVideoResult") .innerHTML=" 您 的 浏览 器 不 支持 


HTML5 视频 播放 ! " 
} 
else { 
if (h264Test=="probably") { 
document .getElementById ("checkVideoResult") .innerHTML=" 您 的 浏览 器 支持 


HTML5 视频 播放 ! "; 
y 


else { 
document .getElementById ("checkVideoResult") .innerHTML=" 您 的 浏览 器 支持 


部 分 HTML5 视频 播放 ! "; 


probably") { 

document .getElementById ("checkVideoResult") .innerHTML=" 您 的 浏览 器 支持 
HTML5 视频 播放 ! "; 

} 

else { 

document .getElementById ("checkVideoResult") .innerHTML=" 您 的 浏览 器 支持 部 
分 HTML5 视频 播放 ! "7 

} 


} 
else { 
document .getElementById ("checkVideoResult") .innerHTML=" 您 的 浏览 器 不 支持 
HTML5 视频 播放 ! " 
} 
} 
</script> 
<title>5.3.1</title> 
</head> 
<body> 
<div id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0;"> 
<button onclick="checkVideo()" style="font-family:Arial, Helvetica, 
sans-serif;"> 检 测 </button> 
</body> 
</html> 
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5.4 实例 : 在 HTML5 中 显示 视频 /音频 


下 面 我 们 通过 一 个 简单 的 实例 来 认识 一 下 HTMLS5 中 音 /视频 的 使 用 方法 。 首 先 在 Web 页 面 加 
载 一 个 视频 文件 ,页面 启动 后 开始 循环 播放 该 视频 文件 ， 当 播放 暂停 时 ,在 视频 文件 上 方 出 现 一 个 
图 片 ， 继 续 播放 视频 文件 时 ， 该 图 片 消失 。 有 没有 觉得 这 个 效果 似曾相识 呢 ? 本 案例 的 代码 如 下 : 

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>5.4.1</title> 
<script> 
Var video; 
var img; 
function init(){ 
Video=document .getElementById ("MyVideo"); 
Video.style.position="absolute"7 
video.style.width="400px"; 
Video.style.height="300px"; 
Video.style.left="50px"; 
video.style.top="50px"; 
img=document .getElementById ("MyImg"); 
img.style.position="absolute"; 
img.style.width="340px"; 
img.style.height="160px"; 
img.style.left="80px"; 
img.style.top="120px"; 
img.style.zIndex=2; 
img.hidden=true; 

} 

function showImg (flag){ 
img .hidden=flag; 

} 

</script> 

</head> 

<body onLoad="init () "> 

<video id="MyVideo" loop autoplay src="movie.mp4" controls 

onPlay="showImg (true);" onPause="showImg (false);" ></video> 

<img id="MyImg" src="MyImage.png" /> 

</body> 

</html> 
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打开 该 页 面 后 ， 视 频 开 始 循环 播放 ， 当 暂停 播放 时 ， 在 视频 上 方 出 现 一 个 图 片 遮挡 了 视频 播 
区 域 ， 效 果 如 下 图 所 示 。 当 再 次 播放 时 ， 图 片 隐藏 。 


可 


5. 


的 


上 日: x 
¢ > © [GB localhosVHTMLSCSS3/3/34.1.html 


[PT 


5.5 ”video 元 素 与 audio 元 素 详解 


Video 元 素 和 audio 元 素 是 HTMLS5 中 针对 音 视 频 新 增 的 两 个 标签 ， 通 过 对 这 两 个 标签 的 设置 ， 
以 控制 页 面 上 音 视频 的 播放 。 本 节 将 详细 介绍 video 元 素 和 audio 元 素 的 属性 、 方 法 和 事件 的 使 用 。 


5.1 video/audio 属性 

video 元 素 和 audio 元 素 的 属性 有 很 多 ， 使 用 的 方法 也 大 同 小 异 ， 下 面 我 们 详细 介绍 这 些 属性 
含义 和 使 用 方法 。 

1. src 属性 

设置 音 /视频 文件 的 URL 地址 。 相 关 使 用 代码 如 下 : 


<video src="movie.mp4" ></video> 
<audio src="song.o0gg" ></ audio> 


2. autoplay 属性 


设置 当 页 面 加 载 持 ， 是 否 自动 播放 音 /视频 文件 。 如 果 需 要 自动 播放 音 /视频 文件 ， 就 添加 该 属 
否则 不 添加 该 属性 。 相 关 使 用 代码 如 下 : 


<video src="movie.mp4" autoplay ></video> 


<audio src="song.0gg" autoplay ></ audio> 
3. preload 属性 
设置 当 页 面 加 载 时 ， 是 否 对 音 / 视 频 文件 进行 预 加 载 。preload 属性 有 三 个 可 供 选 择 的 值 : none 
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表示 不 进行 预 加 载 ; metadata 表示 仅 加 载 元 数据 ， 即 音 / 视 频 文件 的 大 小 、 第 一 帧 、 播 放 列表 和 持 
续 时 间 等 ，auto 表示 预 加 载 全 部 音 /视频 文件 。 相 关 使 用 代码 如 下 : 


<video src="movie.mp4" preload="metadata"></video> 


<audiosrc="song.0gg" preload="metadata"> 


4. poster 属性 

该 属性 是 video 元 素 属性 ， 设 置 当 视 频 不 可 用 时 ， 向 用 户 展现 一 副 图 片 。 相 关 使 用 代码 如 下 : 

<video src="movie.mp4" poster="replace.jpg "></video> 

5. loop 属性 

设置 是 否 循环 播放 音 /视频 文件 。 如 果 需 要 循环 播放 音 /视频 文件 ， 就 添加 该 属性 ， 否 则 不 添加 
该 属性 。 相 关 使 用 代码 如 下 : 


<video src="movie.mp4" loop ></video> 
<audio src="song.o0gg" loop ></ audio> 


6. controls 属性 
设置 是 否 添加 浏览 器 自 带 的 播放 控制 器 ， 其 中 包括 播放 、 和 暂停 和 声音 等 控件 。 如 果 需 要 显示 
播放 控制 器 ， 就 添加 该 属性 ， 否 则 不 添加 该 属性 。 相 关 使 用 代码 如 下 : 


<video src="movie.mp4" controls ></video> 
<audio src="song.o0gg" controls ></ audio> 


如 下 图 所 示 为 谷歌 浏览 器 自 带 的 播放 控制 器 。 另 外 ， 开 发 人 员 还 可 以 根据 自己 的 需要 ， 在 脚 

本 中 自 定义 播放 控制 器 。 
中 
7. width 属性 和 height 属性 


这 两 个 属性 是 video 元 素 属性 ，width 属性 用 于 指定 视频 的 宽度 ，height 属性 用 于 指定 视频 的 
高 度 ， 单 位 均 是 像素 。 相 关 使 用 代码 如 下 : 


<video src="movie.mp4" width="400"” height="300" ></video> 
8. muted 属性 


设置 当 页 面 加 载 时 ， 播 放 器 是 否 被 静音 。 如 果 需 要 静音 ， 就 添加 该 属性 ， 否 则 不 添加 该 属性 。 
相关 使 用 代码 如 下 : 


<video src="movie.mp4" muted></video> 


031 9 =e 图 


<audio src="song.mp3" muted ></audio> 
5.5.2 video/audio 方 法 


在 使 用 video 元 素 和 audio 元 素 时 , 还 可 以 在 脚本 中 使 用 相应 的 方法 对 播放 的 音 /视频 文件 进行 
控制 ， 相 关 的 方法 主要 有 4 种， 下面 分 别 进 行 介绍 。 


80 | HTML5+CSS3+JavaScript 前 端 开发 基础 


1. play 方法 


除了 播放 器 自身 的 播放 功能 外 ,用 户 还 可 以 在 脚本 中 使 用 play 方法 来 控制 音 /视频 的 播放 功能 。 
相关 使 用 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>5.5.1</title> 

<script> 

function play(){ 
var video=document .getElementById ("MyVideo"); 
Video.play()7 

} 

</script> 

</head> 

<body> 

<video id="MyVideo" src="movie.mp4" controls></video> 

<button onClick="play()">play</button> 

</body> 

</html> 


2. pause 方法 


与 play 方法 相对 应 的 pause 方法 用 于 控制 暂停 播放 音 /视频 功能 , pause 方法 也 需要 在 脚本 中 设 
置 才能 使 用 。 相 关 使 用 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>5.5.2</title> 

<script> 

function pause(){ 
Var Video=document .getElementById ("MyVideo"); 
Video.pause () 7 

} 

</script> 

</head> 

<body> 

<video id="MyVideo" src="movie.mp4" controls></video> 

<button onclick="pause()">pause</button> 

</body> 

</html> 
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3. load 方法 
调用 该 方法 可 重新 加 载 音 /视频 文件 进行 播放 。 相 关 使 用 代码 如 下 : 


<!gdoctype html> 


<html> 
<head> 


<meta charset="utf-8"> 


xt 
<script> 
function 


-5.3</title> 


load(){ 


Var video=document .getElementById ("MyVideo"); 


Video.load() 7 


} 


</script> 


</head> 
<body> 


<video id="MyVideo" src="movie.mp4" controls></video> 
<button onClick="load()">load</button> 


</body> 
</html> 


4. canPlayType 方法 

该 方法 用 于 测试 浏览 器 是 否 支 持 指定 的 类 型 ， 并 返回 结果 。 如 果 返 回 空 字符 串 ， 就 表示 浏览 
器 不 支持 该 播放 类 型 ， 如 果 返 回 maybe， 就 表示 浏览 器 可 能 支持 该 播放 类 型 ， 如 果 返 回 probably， 
就 表示 浏览 器 确定 支持 该 播放 类 型 。 关于 canPlayType 的 使 用 代码 详 见 “5.3 ”检测 浏览 器 是 否 支 持 


HTML5 视频 ” 


中 的 示例 代码 。 


5.5.3 video/audio 事件 


在 音 /视频 播放 的 整个 过 程 中 ， 会 触发 一 系列 的 事件 ， 捕 获 这 些 事件 并 加 以 利用 ， 就 可 以 实现 
更 多 的 效果 。 在 HTML5 中 ， 与 video 和 audio 元 素 相 关 的 事件 如 下 表 所 示 。 
事 件 描 述 
loadstart 浏览 器 开始 在 网 上 寻找 媒体 数据 
Progress 浏览 器 正在 获取 媒体 数据 
suspend 浏览 器 暂停 获取 媒体 数据 ， 但 是 下 载 过 程 并 没有 正常 结束 
abort 浏览 器 在 下 载 完 全 部 媒体 数据 之 前 终止 获取 媒体 数据 ， 但 并 不 是 由 错误 引起 的 
error 获取 媒体 数据 过 程 中 出 错 
Video 元 素 或 audio 元 素 所 在 网 络 突然 变 为 未 初始 化 状态 〈 可 能 引起 的 原因 有 两 个 ; 载 入 
emptied 媒体 过 程 中 突然 发 生 一 个 致命 错误 ， 浏览 器 正在 选择 支持 的 播放 格式 时 ， 又 调用 了 load 
方法 重新 载 入 媒体 ) 
stalled 浏览 器 尝试 获取 媒体 数据 失败 
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( 续 表 ) 
事件 描 述 
play 即将 开始 播放 ， 当 执行 了 play 方法 时 触发 ， 或 者 数据 下 载 后 元 素 被 设置 为 autoplay 属性 
pause 播放 暂停 ， 当 执行 了 pause 方法 时 触发 
loadedmetadata | 浏览 器 获取 完毕 媒体 的 时 间 长 和 字 节 数 
loadeddata 浏览 器 已 加 载 完 毕 当 前 播放 为 止 的 媒体 数据 ， 准 备 播 放 
waiting 播放 过 程 由 于 得 不 到 下 一 帧 而 暂停 播放 〈 如 下 一 帧 尚未 加 载 完毕 )， 但 很 快 就 能 得 到 下 一 由 
playing 正在 播放 
canplay 浏览 器 能 够 播放 媒体 , 但 估计 以 当前 播放 速率 不 能 直接 将 媒体 播放 完毕 , 播放 期 间 需 要 缓冲 
canplaythrough | 浏览 器 能 够 播放 媒体 ， 而 且 以 当前 播放 速率 能 够 将 媒体 播放 完毕 ， 不 再 需要 进行 缓冲 
seeking seeking 属性 变 为 rue， 浏 览 器 正在 请 求 数据 
seeked seeking 属性 变 为 false， 浏 览 器 停止 请 求 数据 
ie 当前 播放 位 置 被 改变 ， 可 能 是 播放 过 程 中 的 自然 改变 ， 也 可 能 是 被 人 为 地 改变 , 或 者 是 由 

于 播放 不 能 连续 而 发 生 的 跳 变 

ended 播放 结束 后 停止 播放 
rantechange defaultplaybackrate 属性 默认 播放 速率 〉 或 playbackrate 属性 (当前 播放 速率 ) 被 改变 
durationchange | 播放 时 长 被 改变 
Volumechange | volume 属性 (音量 ) 被 改变 或 muted 属性 (静音 状态 ) 被 改变 


在 javascript 中 捕捉 事件 的 方式 有 两 种 , 第 一 种 是 监听 的 方式 , 即使 用 video 元 素 或 audio 元 素 
的 addEventListener 方法 对 事件 进行 监 昕 。 相 关 代码 如 下 : 
var video=document .getElementById ("MyVideo"); 
Var img=document .getElementById("MyImg"); 
Video.addEventListener ("play", function(){ 
img.hidden=true; 
},false); 


Video 表示 页 面 上 的 video 元 素 或 audio 元 素 ; play 表示 监听 的 事件 名 称 ; 在 function 中 处 理 当 
音 / 视 频 播放 时 需要 执行 的 其 他 操作 ，img.hidden=true 表示 页 面 上 的 一 个 图 片 被 隐藏 ，false 表示 浏 
览 器 采用 bubbing 响应 方式 ， 如 果 为 tue， 就 表示 浏览 器 采用 了 Capture 响应 方式 。 

另 一 种 捕捉 事件 的 方式 是 在 javascript 脚本 中 获取 事件 句柄 (事件 名 称 前 加 on 就 是 事件 句柄 )， 
并 对 事件 句柄 赋值 处 理 函 数 。 相 关 代 码 如 下 : 

Var img=document .getElementBYId ("MyImg") 7 

function showImg (flag){ 

img .hidden=flag; 


} 


<video id="MyVideo" src="movie.mp4" controls onPlay="showImg (true);" 


onPause="showImg (false);" ></video> 


<img id="MyImg" src="myimage.png" hidden="true"/> 
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测试 题 

(1) HIML5 中 用 于 播放 音 /视频 文件 的 元 素 是 什么 ? 
(2) 如 何 控制 页 面 加 载 时 自动 播放 音 /视频 文件 ? 
(3) HTML5 中 如 何 控 制 音 /视频 的 播放 与 暂停 ? 

(4) 当 视 频 文件 不 可 用 时 ， 如 何 展示 一 张 图 片 ? 


5.6 本章 小 结 


本 章 主要 学 习 了 HTML5 中 音频 和 视频 的 操作 方法 ， 通 过 本 章 的 学 习 ， 读 者 应 该 熟练 掌握 在 
HIML5 页 面 中 播放 音 /视频 的 方法 ， 以 及 控制 音 /视频 文件 的 播放 、 和 暂停 、 循 环 、 静 音 等 的 方法 。 


HTML5 canvas 


<canvas></canvas> 是 HTMLS5 出 现 的 新 标签 ， 它 有 自己 本 身 的 属性 、 方 法 和 事件 ， 其 中 就 有 绘 
图 的 方法 。 这 个 HTML 元 素 是 为 客户 端 矢量 图 形 而 设 计 的 。 它 自己 没有 行为 , 但 却 把 一 个 绘图 API 
展现 给 客户 端 JavaScript， 从 而 使 脚本 能 够 把 想 绘制 的 东西 都 绘制 到 一 块 画布 上 。canvas 拥有 多 种 
绘制 路 径 、 和 矩形 、 圆 形 、 字 符 以 及 添加 图 像 的 方法 。 这 个 技术 的 出 现 对 游戏 开发 行业 是 革命 性 的 ， 
即使 不 是 用 于 游戏 开发 ,照样 可 以 用 canvas 突破 丰富 视觉 可 视 化 的 障碍 , 借用 第 三 方 工具 (如 Flash) 
来 实现 复杂 视觉 效果 的 现状 将 成 为 历史 。 


6.1 canvas 基础 入 门 


有 关 canvas 的 一 切 都 是 令 人 兴奋 和 神往 的 ， 刚 开始 接触 canvas 时 ， 笔 者 与 读者 的 心情 一 样 ， 
迫不及待 地 想 要 掌握 canvas 的 秘诀 。 但 没有 好 的 基础 ， 就 没有 将 来 熟练 的 应 用 。 就 让 我 们 从 最 基 
本 的 图 形 绘制 开始 ， 一 步 步 体验 canvas 的 强大 功能 吧 。 


6.1.1 什么 是 canvas 


顾名思义 ，canvas 是 一 块 “画布 ”，JavaScript 就 如 同 画笔 ， 可 以 在 这 块 画布 上 描绘 出 无 数 的 
可 能 。 画 布 的 形状 是 矩形 ， 可 以 把 它 理解 为 一 个 容器 ， 里 面 装着 JavaScript 脚本 ， 借 助 这 些 脚 本 能 
够 绘制 像 各 种 路 径 、 殖 形 、 椭 圆 形 、 字 符 ， 甚 至 可 以 添加 图 像 。 其 实 ， 它 也 仅 是 一 个 容器 而 已 ， 图 
形 和 图 像 的 实现 都 得 靠 JavaScript。 


6.1.2 实例 : 在 HTML5 页 面 中 添加 canvas 元 素 


小 时 候 我 们 老师 常 说 ，“ 光 说 不 练 ， 是 个 笨蛋 ! ”说 得 再 多 ， 不 如 动手 做 一 做 ， 本 书 的 特色 
就 是 尽 可 能 多 地 让 大 家 动手 实际 操作 , 频繁 地 项 代码, 让 知识 在 项 敲打 打 的 过 程 中 自然 而 然 地 刻录 
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在 脑海 里 ， 而 不 是 靠 单纯 地 阅读 和 记忆 。 下 面 就 打开 HIML 编辑 器 ， 敲 入 以 下 代码 吧 ， 这 些 代码 
将 在 HIMLS 页 面 中 添加 canvas 元 素 。 在 此 以 Dreamweaver CC 为 例 ， 首 先 需要 新 建 一 个 HIMLS 
文档 。 


<canvas id="myCanvas" width="300" height="200"></canvas> 


上 面 的 代码 中 ，id="myCanvas" 为 canvas 元 素 指定 了 一 个 id， 便 于 在 将 来 的 JavaScript 代码 中 
引用 。 我 们 知道 id 属性 是 HTML 的 全 局 属性 ， 用 于 规定 元 素 的 唯一 症 。 

在 Dreamweaver CC 中 的 完整 代码 和 实时 预览 效果 如 下 图 所 示 , 从 中 我 们 可 以 看 到 以 上 代码 是 
被 添加 到 了 <body></body> 标 签 之 间 。 


Dw 文 HP 六 (吉本 (VW 。 基 和 四。 修改 IM) 楂 (0 合 人 (0) 站 点 (S) 宣 D(W) 帮助 (H) 古国 0Lleslxj 
Ved A x| -一 
网 [ 陷 ] 光 | 天 抠 图 | 恩 。 鼎 是 ce 天 全 二 昌 拓 入 

| 1 <!doctype htnl> < 
六 2 <htmt> 1 = 
国 : -ed 3 
ns 加 | 四 ca 
区 <title>canvas 实 例 1</title> | Css ia 果 
车 </head 
| 等 
| <body> 
| 


二 


<canvas id="myCanvas" width="209" height="166"></canvas> 


</body> 


贡院 [站 


[ 

| 13 </htmt> 

回 := 

回 

el 

驶 

| KI va 日 日 呢 1 3s: 

me | 


保存 一 下 文件 ， 然 后 在 Chrome 浏览 器 中 看 一 看 是 什么 效果 。 当 然 是 什么 也 看 不 到 的 ， 因 为 
canvas 只 有 宽 和 高 两 个 属性 ， 下 一 小 节 我 们 在 里 面 绘制 一 个 矩形 ， 就 能 直观 地 看 到 它 的 作用 了 。 
一 -条 一 一 - 打 一 一 -村 一 一 -村 一 一 于 一 一 -一 一 -一 一 -机 一 一 -一 一 -一 一 下- 一 一 -一 


小 知识 : canvas 的 属性 
<canvas> 标 签 支持 HTML 中 的 全 局 属性 和 事件 属性 ，height 和 width 是 HIML5 中 的 新 属性 ， 
如 下 表 所 示 。 


描述 
设置 canvas 的 高 度 
设置 canvas 的 宽度 


一 -二 一 一 条 一 一 全 一 一 全 一 一 二 一 一 二 一 一 人 一 一 二 一 一 全 一 一 全 一 一 全 一 一 二- 一 
6.1.3 实例: 绘制 一 个 蓝 色 珑 形 
绘制 蓝 色 和 矩形 的 代码 如 下 : 


<!doctype html> 
<html> 
<head> 


height 
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<meta charset="utf-8"> 

<title>6.1.1</title> 

</head> 

<body> 

<canvas id="myCanvas"> 您 的 浏览 器 不 支持 canvas 标签 </canvas> 
<script type="text/javascript"> 

Var canvas=document .getElementById('myCanvas'); 
var ctx=canvas.getContext ('2d"'); 
ctx.fillstyle="#000099"'; 

ctx.fillRect (0,0,80,100); 

</script> 

</body> 

</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


各 C 


6.2 绘制 基本 线条 


使 用 JavaScript 这 支 笔 可 以 在 canvas 画布 中 绘制 各 种 图 形 , 它 之 所 以 有 这 么 强大 的 功能 , 是 因 
为 canvas 的 CanvasRenderingContext2D 对 象 为 我 们 提供 了 丰富 多 彩 的 API 工具 ， 包 括 本 节 将 要 介 
绍 的 直线 、 二 次 曲线 、 贝 塞 尔 曲线 和 圆 弧 曲线 。 下 表 是 绘制 这 些 基 本 线条 将 要 用 到 的 API。 


方 法 描 述 

beginPathO) 开始 一 个 新 的 绘制 路 径 

moveTo(int x.int y) 移动 画笔 到 指定 坐标 点 (x.y)， 该 点 作为 路 径 的 起 点 

lineTo(int x.int y) 从 当前 端点 到 指定 坐标 点 (x.) 添 加 一 条 直线 

stroke0) 沿 着 绘制 路 径 的 坐标 点 顺序 绘制 直线 

closePath() 如 果 当 前 的 绘制 路 径 是 打开 的 ， 则 关系 该 绘制 路 径 
quadraticCurveTo(cx.cy.x.y) 绘制 二 次 曲线 ， 坐 标点 (cx.cy) 为 控制 点 ， 华 标点 (x.y) 为 终点 
bezierCurveTo(cx1.cyl.cx2.cy2.end1.end?) eg 2 点 坐标 点 (cxlcy10) 和 (cx2.cy2) 为 控制 点 ， 坐 标 


( 续 表 ) 
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法 描 述 


绘制 圆 弧 ， 坐 标点 (xy) 为 圆 的 中 心 点 , [是 圆 的 半径 ，sAngle 是 
arc(Cx.YLSAngle.eAngle.counterclockwise) | 起 始 角 ，eAngle 是 结束 角 ，counterclockwise 是 可 选 参数 ，false 
是 顺 时 针 ，true 是 逆 时 针 


6.2.1 实例 : 绘制 直线 


我 们 在 中 学 几何 课 上 学 过 “两 点 一 线 ”，canvas 在 绘制 直线 时 也 需要 一 个 起 点 和 一 个 终点 。 


绘制 直线 的 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>6.2.1</title> 
</head> 
<body> 
<canvas id="myCanvas"> 您 的 浏览 器 不 支持 canvas 标签 </canvas> 
<script type="text/javascript"> 
var canvas = document .getElementById("myCanvas"); // 获 取 Canvas 对 象 


var ctx = canvas.getContext ("2d"); // 获 取 上 下 文 对 象 
ctx.beginPath(); // 开 始 一 个 新 的 绘制 路 径 
ctx.moveTo (10, 10); // 定 义 直线 的 起 点 坐标 为 (10, 10) 
ctx.lineTo (200, 10); // 定 义 直线 的 终点 坐标 为 (200, 10) 
ctx.stroke(); // 沿 着 坐标 点 顺序 的 路 径 绘制 直线 
ctx.closePath(); // 关 闭 当前 的 绘制 路 径 

</script> 

</body> 

</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


6.2.2 ”实例 : 绘制 二 次 曲线 


的 


二 次 曲线 quadratic curve) 也 称 圆 锥 曲线 或 圆锥 截 线 ， 是 直 圆 锥 面 的 两 腔 被 一 平面 所 截 而 得 
曲线 。 二 次 曲线 由 一 个 起 点 、 一 个 终点 和 一 个 控制 点 决定 ， 当 控制 点 经 过 圆锥 顶点 时 ， 曲 线 变 成 


一 个 点 、 直 线 或 相交 直线 ， 当 控制 点 不 经 过 圆锥 顶点 时 ， 曲 线 可 能 是 圆 、 椭 圆 、 双 曲线 或 抛物 线 。 
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使 用 canvas 的 quadraticCurveTo 函数 绘制 二 次 曲线 的 代码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>6.2.2.html</title> 
</head> 
<body> 
<canvas id="myCanvas"> 您 的 浏览 器 不 支持 canvas 标签 </canvas> 
<script type="text/javascript"> 
Var canvas=document .getElementById('myCanvas'); 


if(canvas && canvas.getContext){ // 判 断 Canvas 对 象 是 否 为 空 
Var ctx = canvas.getContext ("2d"); // 获 取 Canvas 对 象 上 下 文 
ctx.beginpath(); / /开始 一 个 新 的 绘制 路 径 
ctx.moveTo (100, 50); // 定 义 直 线 的 起 点 坐标 为 (100, 50) 
ctx.quadraticCurveTo (100,15,300,30) 7 // 设 置 二 次 曲线 坐标 
ctx.stroke ()7 // 绘 制 路 径 

} 

</script> 

</body> 

</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


© iDlocalhosVHTML5CSS3/4/4.2.2html 


一 一 一 一 


一 -和 一 一 -人 一 一 - 扩 -一 一 -人 -一 一 -人 一 一 -人 一 一 -人 一 一 -一 一 下 -一 一 -4 一 一 -~- 一 一 -0- 一 
关于 closePath 

细心 的 读者 会 发 现 ， 在 绘制 直线 时 ， 我 们 最 后 使 用 closePath 函数 关闭 了 当前 的 绘制 路 径 ， 但 
是 在 绘制 二 次 曲线 的 时 候 却 没有 用 。 这 里 需要 提醒 大 家 ，closePath 函数 用 于 创建 从 当前 点 到 开始 
点 的 路 径 ， 如 果 这 里 使 用 此 函数 ， 就 会 绘制 一 个 封闭 的 二 次 曲线 。 

问 : 在 获取 Canvas 对 象 时 为 什么 要 判断 它 是 否 为 空 ? 

答 : 因为 有 些 浏览 器 对 Canvas 的 支持 不 是 很 好 ， 为 了 避免 网 页 运行 时 出 现 错误 ， 所 以 需要 提前 
判断 。 
一 -一 一 -人 一 一 -人 一 一 -人 一 一 下- 一 一 -一 一 -人 一 一 -一 一 -一 一 -一 一 -一 一 -一 
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6.2.3 实例: 绘制 贝 塞 尔 曲线 


贝 塞 尔 曲线 是 计算 机 图 形 中 非常 重要 的 参数 曲线 ， 广 泛 应 用 于 计算 机 图 形 中 为 平滑 曲线 建立 模 
型 。 贝 赛 尔 曲线 的 每 一 个 顶点 都 有 两 个 控制 点 〈 起 点 和 终点 ) ， 用 于 控制 在 该 顶点 两 侧 的 曲线 弧度 。 
使 用 canvas 的 bezierCurveTo 函数 可 以 非常 方便 地 绘制 贝 塞 尔 曲线 。 绘 制 贝 塞 尔 曲 线 的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.2.3.html</title> 

</head> 

<body> 

<canvas id="myCanvas"> 您 的 浏览 器 不 支持 canvas 标签 </canvas> 
<script type="text/javascript"> 

Var canvas=document .getElementById('myCanvas'); 


if(canvas && canvas.getContext){ // 判 断 Canvas 对 象 是 否 为 空 
Var ctx = canvas.getContext ("2d"); // 获 取 Canvas 对 象 上 下 文 
ctx.beginpath(); // 开 始 一 个 新 的 绘制 路 径 
ctx.moveTo(50,200); // 定 义 直线 的 起 点 坐标 为 (50, 200) 
ctx.bezierCurveTo (50,100,200,100,200,150); // 设 置 贝 塞 尔 曲 线 坐 标 
ctx .stroke () 7 /7 绘制 路 径 

} 

</script> 

</body> 

</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


6.2.4 实例 : 绘制 圆 弧 
使 用 canvas 的 are 方法 绘制 圆 弧 的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>6.2.4.html</title> 
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</head> 

<body> 

<canvas id="myCanvas"> 您 的 浏览 器 不 支持 canvas 标签 </canvas> 
<script type="text/javascript"> 

Var canvas=document .getElementById('myCanvas'); 


if(canvas && canvas.getContext){ // 判 断 Canvas 对 象 是 否 为 空 
var ctx = canvas.getContext ("2d"); // 获 取 Canvas 对 象 上 下 文 
ctx.beginpath (); // 开 始 一 个 新 的 绘制 路 径 
ctx.arc(100,75,50,0,2*Math.PI*0.75); // 设 置 圆 弧 坐标 
ctx.stroke (); / /绘制 路 径 

} 

</script> 

</body> 

</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


关于 arc 
坊 ” canvas 中 并 没有 提供 直接 绘制 国 弧 的 方法 ， 本 例 中 使 用 绘制 四 分 之 三 辆 的 方法 绘制 国 
提 示 。 弧 ， 也 算是 一 种 变通 ， 关 于 图 的 绘制 会 在 下 一 节 中 详细 介绍 。 


6.3 绘制 简单 形状 


HIML5 中 的 canvas 功能 非常 强大 ， 不 但 可 以 绘制 一 些 基本 的 线条 ， 也 可 以 绘制 如 圆 形 、 三 
角形 、 和 矩形 、 圆 角 和 矩形 等 二 维 形状 ,还 可 以 根据 用 户 的 实际 需求 ， 绘 制 自 定义 二 维 图 形 ， 要 完成 这 
些 功能 ， 就 需要 用 到 CanvasRenderingContext2D 对 象 提供 的 其 他 API。 


6.3.1 实例 : 绘制 圆 形 


在 上 一 节 内 容 中 我 们 学 习 了 如 何 使 用 are 函数 绘制 圆 弧 , 细心 的 读者 会 发 现在 指定 圆 弧 结束 角 
时 ,我们 使 用 了 “2*Math.PI*0.75” 参 数 。Math.PI 是 计算 机 中 表示 数学 的 意思 ， 我 们 用 27 乘 以 
0.75 就 是 绘制 四 分 之 三 个 圆 ， 这 样 就 完成 了 一 个 圆 弧 的 绘制 。 如 果 把 0.75 去 掉 ， 就 能 绘制 一 个 圆 
形 。 绘 制 圆 形 的 代码 如 下 ; 
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<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 

<title>6.3.1.html</title> 

</head> 

<body> 

<canvas id="myCanvas"> 您 的 浏览 器 不 支持 canvas 标签 </canvas> 
<script type="text/javascript"> 

Var canvas=document .getElementById('myCanvas'); 


if(canvas && canvas.getContext){ // 判 断 Canvas 对 象 是 否 为 空 
Var ctx = canvas.getContext ("2d"); // 获 取 Canvas 对 象 上 下 文 
ctzx.beginPpath () 7 // 开 始 一 个 新 的 绘制 路 径 
ctx.arc(100,75,50,0,2*Math.PI); // 设 置 圆 坐 标 
ctx.stroke () 7 // 绘 制 路 径 

下 

</ Script> 

</body> 

</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


Es 已 D localhost/HTMLS5CSS3/4/4.3.1.html 


AP ~ 
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6.3.2 实例 : 绘制 三 角形 


前 面 我 们 学 习 了 如 何 绘制 一 条 直线 ， 如 果 我 们 绘制 三 条 直线 ， 并 设置 三 条 直线 的 起 点 和 终点 
相互 连接 ， 这 样 就 能 绘制 出 一 个 三 角形 。 绘 制 三 角形 的 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.3.2.html</title> 

</head> 

<body> 

<canvas id="myCanvas"> 您 的 浏览 器 不 支持 canvas 标签 </canvas> 

<script type="text/javascript"> 

Var canvas=document .getElementById('myCanvas'); 

if(canvas && canvas.getContext){ // 判 断 Canvas 对 象 是 否 为 空 
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var ctx = canvas.getContext ("2d"); // 获 取 Canvas 对 象 上 下 文 
ctx-beginPath () 7 // 开 始 一 个 新 的 绘制 路 径 
ctx.moveTo (0,10); // 设 置 三 角形 的 起 点 
ctx.lineTo (200, 20); // 设 置 三 角形 的 第 二 个 点 
ctx.lineTo(280,100); // 设 置 三 角形 的 第 三 个 点 
ctx.closePath (); // 将 三 角形 第 三 个 点 与 起 点 连接 
ctx.stroke(); / /绘制 路 径 

} 

</script> 

</body> 

</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


© D localhost/HTMLSCSS3/4/4.3.2.html 


一 于 一 一 -一 一 个 一 一 上 条 一 一 上 末 - 一 一 全 一 一 条 一 一 -条 一 一 条 一 一 上 条 一 一 条 -一 一 入 -一 
实践 : 绘制 多 边 形 
通过 本 例 的 学 习 ， 相 信 大 家 已 经 掌握 了 三 角形 的 绘制 方法 。 如 果 在 完成 三 角形 第 三 个 点 的 绘 
制 后 ， 我 们 继续 绘制 第 四 个 点 甚至 第 五 个 点 ， 然 后 调用 closePath 函数 闭合 绘制 的 图 形 ， 这 样 会 得 
到 一 个 什么 样 的 图 形 呢 ? 有 兴趣 的 读者 可 以 动手 试 一 试 。 
一 -人 一 一 -多 一 一 -人 一 一 -一 一 -和 一 一 -全 一 一 -人 一 一 -外 一 一 -人 一 一 -一 一 下 -一 一 -一 


6.3.3 实例 : 绘制 圆 角 和 矩形 


前 面 我 们 绘制 的 图 形 都 是 canvas 的 CanvasRenderingContext2D 能 够 直接 提供 的 图 形 对 象 ， 如 
果 需 要 绘制 如 圆 角 矩形 这 样 特 殊 一 点 的 图 形 ， 应 该 如 何 绘制 呢 ? 这 里 就 需要 用 到 其 他 几 个 API 对 
象 ， 通 过 一 些 特殊 的 处 理 ， 绘 制 出 符合 我 们 要 求 的 图 形 。 本 例 中 将 用 到 arcTo 函数 绘制 圆 角 拢 形 ， 
该 函数 的 详细 描述 如 下 。 
太古 法 描 述 
arcTo (xl1.y1.x2.y2.D | 绘制 介 于 两 个 切线 之 间 的 圆 弧 ， 坐 标点 (x1.y1) 为 圆 弧 起 点 坐标 ， 坐 标点 (x2.y2) 为 圆 
弧 终点 坐标 ，T 为 圆 弧 的 半径 。 


arcTo 函数 为 我 们 提供 了 两 条 切线 之 间 圆 弧 的 绘制 方法 ， 圆 角 氟 形 是 由 4 个 这 样 的 圆 弧 和 4 条 
直线 组 成 ， 所 以 只 要 能 精确 控制 圆 弧 和 直线 的 每 个 点 , 就 能 准确 地 绘制 出 一 个 圆 角 和 矩形。 绘制 圆 角 
和 矩形 的 代码 如 下 : 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.3.3.html</title> 

</head> 

<body> 

<canvas id="myCanvas"> 您 的 浏览 器 不 支持 canvas 标签 </canvas> 
<script type="text/javascript"> 

Var canvas=document .getElementById('myCanvas'); 


if(canvas && canvas.getContext){ // 判 断 Canvas 对 象 是 否 为 空 
Var ctx = canvas.getContext ("2d"); // 获 取 Canvas 对 象 上 下 文 
ctx.beginpath (); 
ctx.moveTo(10,10); // 在 左上 方 开 始 
ctx.arcTo (100,10,100, 20,10); // 绘 制 右 上 方圆 角 
ctx.arcTo (100,110, 90,110,10); // 绘 制 右 下 方圆 角 
ctx.arcTo(0,110,0,100,10); // 绘 制 左下 方圆 角 
ctx.arcTo (0,10,10,10,10); // 绘 制 左 上 方圆 角 


CtX. Stroke () 7 


</script> 
</body> 
</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


回 433html 


€ GD localhost/HTMLS5CSS3/4/4.3.3.html 


一 - 杂 一 一 -人 一 一 -人 一 一 -一 一 -人 一 一 - 一 一 全 一 一 趟 一 一 个 一 一 -全 一 一 -一 一 直 一 
思考 : 自 定 义 函 数 


在 本 例 中 ,我 们 使 用 了 4 个 arcTo 函数 完成 圆 角 矩形 的 绘制 , 但 是 每 个 arcTo 函数 都 需要 指定 
具体 的 参数 值 ， 而 这 些 参数 值 之 间 又 存在 一 定 的 关系 , 所以， 如 果 能 将 这 些 关 系 提炼 成 一 个 自 定义 
函数 ， 那 么 以 后 在 绘制 圆 角 矩形 时 ， 就 会 非常 方便 。 这 里 给 一 个 提示 ， 自 定义 函数 的 参数 可 以 设置 
为 Gy w, h,D，x 和 y 指定 起 始 坐 标点 (x,y)，w 代表 秆 形 的 宽度 ，h 代表 和 矩形 的 高 度 ，r 代表 圆 角 
的 半径 ， 有 兴趣 的 读者 可 以 试 一 下 。 

一 -条 一 一 -起 一 一 -村 一 一 -村 一 一 -一 一 -一 一 -一 一 - 林 一 一 -一 一 -一 一 -一 一 -一 
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6.3.4 实例 : 绘制 自 定义 图 形 


虽然 canvas 提供 了 很 多 基本 图 形 的 绘制 , 但 是 在 实际 应 用 中 , 经 常 需要 绘制 一 些 复杂 的 图 形 ， 
而 canvas 却 并 未 提供 绘制 这 些 图 形 的 API， 此 时 就 需要 使 用 多 种 绘图 方法 来 绘制 这 些 图 形 。 以 下 
是 绘制 一 个 自 定义 图 形 的 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.3.4.html</title> 

</head> 

<body> 

<canvas id="myCanvas"> 您 的 浏览 器 不 支持 canvas 标签 </canvas> 

<script type="text/javascript"> 

Var canvas=document .getElementById('myCanvas'); 


if(canvas && canvas.getContext){ // 判 断 Canvas 对 象 是 否 为 空 
Var ctx = canvas.getContext ("2d"); // 获 取 Canvas 对 象 上 下 文 
ctx.beginPath(); 
ctx.arc(75,75,50,0,Math.PI*2, true); // 绘 制 外 圆 
ctx.moveTo(110,75); 
ctx.arc(75,75,35,0,Math.PI, false); // 绘 制 嘴 
ctx.moveTo(65, 65); 
ctx.arc(60,65,5,0,Math.PI*2, true); // 绘 制 左 眼 
ctx.moveTo(95, 65); 
ctx.arc(90,65,5,0,Math.PI*2,true); // 绘 制 右 眼 


ctx.stroke(); 
} 
</script> 
</body> 
</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


人 © BD localhost/HTML5CSS3/4/4.3.4.html 
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一 -条 一 一 -起 一 一 -村 一 一 -村 一 一 -一 一 -一 一 -一 一 -和 一 一 -一 一 -一 一 -一 一 -一 
思考 : 自 定义 图 形 


日 常生 活 中 可 以 见 到 很 多 不 规则 的 图 形 ， 你 可 以 想到 哪些 ? 尝试 一 下 ， 利 用 学 过 的 canvas 绘 
图 知识 ， 将 你 见 到 的 不 规则 图 形 绘制 出 来 。 
一 -人 一 一 下 一 一 - 寺 一 一 -一 一 -一 一 -一 一 -一 一 -一 一 -一 一 下 -一 一 -一 一 -一 


6.4 绘制 渐变 


渐变 在 日 常生 活 中 随处 可 见 ， 是 一 种 很 普遍 的 视觉 形象 。canvas 为 实现 渐变 效果 提供 了 很 好 
的 解决 方案 。 在 HTML5 中 主要 有 两 种 渐变 方式 : 一 种 是 沿 着 直线 的 渐变 ， 称 之 为 线性 渐变 ， 另 一 
种 是 从 一 个 点 或 沿 着 一 个 圆 的 半径 向 四 周 渐变 ， 称 之 为 径 向 渐变 。 


6.4.1 实例 : 绘制 线性 渐变 


canvas 提供 了 用 于 创建 线性 渐变 的 函数 createLinearGradient(x0,y0,xl.y1)。 坐 标点 (x0.y0) 指 定 
线性 渐变 的 起 点 ， 华 标点 (x1,y1) 指 定 线性 渐变 的 终点 ， 如 果 这 两 个 坐标 点 在 一 条 水 平 线 上 ， 那 么 将 
会 创建 水 平 线性 渐变 ; 如 果 这 两 个 坐标 点 在 一 条 垂直 线 上 ,那么 将 创建 垂直 线性 渐变 ; 如 果 这 两 个 
坐标 点 连 线 是 一 条 倾斜 的 直线 , 那么 将 创建 倾斜 线性 渐变 。 例如 要 创建 宽度 为 300 像素 的 水 平 线性 
渐变 ， 可 以 使 用 以 下 的 代码 : 


var gradient=createLinearGradient (0,0,300,0); 


有 了 一 个 渐变 对 象 之 后 ， 我 们 就 需要 定义 渐变 的 颜色 了 。 在 canvas 中 使 用 addColorStop 
(stop,color) 函 数 来 定义 渐变 的 颜色 ， 参 数 stop 表示 开始 渐变 位 置 占 渐变 区 域 大 小 的 百分比 ， 为 0~1 
之 间 的 任意 值 ， 参 数 color 为 颜色 样式 。 在 实际 应 用 中 ， 至 少 要 添加 两 种 以 上 的 颜色 才能 达到 渐变 
效果 。 例 如 要 创建 从 红色 到 蓝 色 的 渐变 ， 可 以 使 用 以 下 代码 : 

ctx.addColorSstop(0, "#f£00"); 

ctx.addColorstop (1, "#00f"); 


接 下 来 我 们 需要 设置 canvas 内 容 的 flStyle 为 当前 的 渐变 对 象 ， 并 且 绘制 这 个 图 形 ， 比 如 一 
个 矩形 或 一 条 直线 。 为 了 看 到 渐变 效果 ， 我 们 还 需要 以 下 代码 : 


ctx.fillstyle = gradient; // 设 置 fillSstyle 为 当前 的 渐变 对 象 
ctx.fillRect (0,0,400,300); / /绘制 渐变 图 形 


至 此 ， 一 个 线性 渐变 的 图 形 就 绘制 完成 了 。 完 整 的 代码 如 下 : 
<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.4.1.html</title> 
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</head> 
<body> 
<canvas id="myCanvas"> 您 的 浏览 器 不 支持 canvas 标签 </canvas> 
<script type="text/javascript"> 
Var canvas = document .getElementById ("myCanvas"); 
if(canvas && canvas.getContext){ 
Var ctx = canvas.getContext ("2d"); 
Var grad = ctx.createLinearGradient (0, 0, 300, 0); 
grad.addColorstop(0, "#f£00"); 
grad.addColorstop(1, "#00f"); 
ctx.fillstyle = grad; 
ctx.fillRect (0, 0, 300, 100); 
} 
</script> 
</body> 
</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


© | localhost/HTML5CSS3/4/4.4.1.htm 


问 : 在 设置 颜色 时 ， 可 以 使 用 什么 方式 ? 
答 : 颜色 模式 分 为 RGB 模式 、CMYK 模式 、HSB 模式 、lab 模式 、 位 图 模式 、 灰 度 模式 、 索 
引 模式 、 双 色调 模式 和 多 通道 模式 等 。 常 用 的 模式 是 RGB 模式 ， 如 考 F0000。 


6.4.2 实例: 绘制 径 向 渐变 


径 向 渐变 与 线性 渐变 的 实现 方式 基本 类 似 ， 在 canvas 中 使 用 
createRadiaGradient(x0,y0,r0,x1,y1,r1) 函 数 沿 两 个 圆 之 间 的 锥 面 绘制 渐变 。 前 三 个 参数 代表 一 个 圆心 
为 〈x0.y0) 半径 为 10 的 开始 圆 ， 后 三 个 参数 代表 圆心 为 (xl.y1) 半径 为 rl 的 结束 圆 。 创 建 该 对 
象 后 ， 仍 然 需 要 使 用 addColorStop 函数 定义 渐变 颜色 ， 并 设置 径 向 渐变 对 象 为 fillStyle 的 当前 渐变 
对 象 ， 最 后 绘制 一 个 渐变 图 形 ， 完 成 径 向 渐变 的 绘制 。 绘 制 径 向 渐变 的 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.4.2.html</title> 

</head> 

<body> 
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<canvas id="myCanvas” width="400"”height="300"> 您 的 浏览 器 不 支持 canvas 标签 
</canvas> 
<script type="text/javascript"> 
Var canvas = document .getElementById ("myCanvas"); 
Var ctx = canvas.getContext ("2d"); 
var grad = ctx.createRadialGradient (200,200,50, 200,200,200); 
grad.addColorSstop(0, "#£00"); 
grad.addColorstop(1, "#00f"); 
ctx.fillSstyle = grad; 
ctx.fillRect (0, 0, 400, 400); 
</script> 
</body> 
</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


回 4zhoml a 
4 3 CD localhosVHT™M 


C7 canvas 的 尺寸 
戌 ” 在 绘制 径 向 渐变 时 ， 可 能 会 因为 canvas 的 宽度 或 高 度 设置 不 合适 ， 导 致 径 向 渐变 显示 
提 示 。 不 完全 ， 这 时 候 就 需要 考虑 调整 canvas 的 尺寸 ， 以 便 能 完全 显示 径 向 渐变 的 效果 。 


6.5 组 合 


在 设计 图 形 时 ， 经 常 需要 将 多 个 图 形 倒 加 在 一 起 ， 并 且 为 了 使 显示 效果 更 加 逼真 ， 还 需要 为 
组 合 的 图 形 添加 阴影 和 透明 效果 。 在 HIML5 中 ，canvas 同样 能 够 轻松 实现 这 些 功能 。 


6.5.1 实例: 绘制 阴影 


在 绘制 阴影 效果 时 ， 需 要 使 用 canvas 的 多 个 属性 配合 完成 ， 如 设置 阴影 的 模糊 级 数 
shadowBlur， 设 置 形状 与 阴影 的 水 平 距离 shadowOffsetXx， 设 置 形状 与 阴影 的 垂直 距离 
shadowOffsetY， 设 置 阴影 的 颜色 shadowColor。 当 然 ， 还 需要 绘制 一 个 形状 来 显示 该 形状 的 阴影 。 
绘制 正方 形 阴影 的 代码 如 下 : 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.5.1.html</title> 

</head> 

<body> 

<canvas id="myCanvas" width="700” height="300"> 您 的 浏览 器 不 支持 canvas 标签 
</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById ("myCanvas"); 


Var ctx=c.getContext ("2d"); 


ctx.save(); // 保 存 上 下 文 对 象 
ctx.shadowBlur=10; // 设 置 阴影 的 模糊 级 数 
ctx.shadowOoffsetX=20; // 设 置 阴影 与 矩形 的 水 平 距离 
ctx.shadowoffsetY=20; // 设 置 阴影 与 矩形 的 垂直 距离 
ctx.shadowColor="black"; // 设 置 阴影 的 颜色 
ctx.fillstyle="blue"; // 设 置 填充 的 颜色 
ctx.beginpath (); // 开 始 绘制 图 形 
ctx.fillRect (20,20,200, 200); /7 绘制 一 个 矩形 
ctx.restore(); // 获 取保 存 的 上 下 文 对 象 
ctx.fillstyle="black"; // 重 新 设置 填充 颜色 
ctx.beginPath(); // 开 始 一 个 新 的 绘制 路 径 
ctx.fillRect (300, 20,200, 200); /7 绘制 第 二 个 矩形 

</script> 

</body> 

</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


Tocalhost 


一 上 -一 一 玫 - 一 一 圭一 一 玲 - 一 一 玫 - 一 一 玲 - 一 一 琼 -一 一 玫 - 一 一 玲 - 一 一 玫 - 一 一 开 - 一 一 琅 - 一 
问 : shadowOffsetX 和 shadowOffsetY 的 值 对 阴影 有 什么 效果 ? 
答 : shadowOffsetX 和 shadowOffsetY 表示 阴影 与 对 象 的 水 平和 垂直 距离 。 如 果 值 是 正 数 ， 阴 
影 就 显示 在 对 象 的 右边 和 下 边 ; 如 果 值 是 负数 ， 阴 影 就 显示 在 对 象 的 左边 和 上 边 。 
一 生 一 一 和 一 一 - 针 一 一 -一 一 -二 一 一 二 一 一 全 一 一 生 一 一 全 一 一 生 一 一 全 -一 一 全 -一 
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6.5.2 ”实例 : 透明 效果 


在 canvas 中 绘制 重 有 图 形 时 ， 主 要 通过 设置 globalAlpha 属性 来 控制 重 又 图形 的 透明 度 ， 该 值 
介 于 0 和 1 之 间 ，0 表示 完全 透明 ，1 表示 完全 不 透明 。 本 例 绘制 了 三 个 矩形 框 ， 其 中 一 个 完全 不 
透明 ， 另 外 两 个 半 透 明 ， 绘 制 此 效果 的 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>4.5.2.html</title> 

</head> 

<body> 

<canvas id="myCanvas" width="700"” height="400"> 您 的 浏览 器 不 支持 canvas 标签 
</canvas> 

<script type="text/javascript"> 


Var c=document .getElementById ("myCanvas"); 
Var ctx=c.getContext ("2d"); 


ctx.fillstyle="red"; // 设 置 填充 颜色 
ctx.fillRect (20, 20, 300, 200); // 绘 制 不 透明 矩形 框 
ctx.globalAlpha=0.2; // 设 置 透明 度 
ctx.fillstyle="blue"; // 设 置 填充 颜色 
ctx.fillRect (100,100, 300, 200); // 绘 制 第 二 个 矩形 框 
ctx.fillSstyle="green"; // 设 置 透明 度 
ctx.fillRect (150,150, 200, 200); // 绘 制 第 三 个 矩形 框 

</script> 

</body> 

</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


© 3 © Blocalhost/HTMLSCSS3/’ 
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6.6 使 用 图 像 


单调 的 网 页 需要 图 片 的 点 级 ， 无 论 是 Logo 还 是 产品 图 像 ， 都 会 给 人 耳目 一 新 的 感觉 。 在 
HTMLS5 中 ， 使 用 canvas 就 可 以 直接 插入 图 像 ， 甚 至 还 可 以 对 插入 的 图 像 进行 平 铺 和 裁剪 等 操作 ， 
本 节 就 让 来 了 解 一 下 canvas 在 图 像 操作 方面 的 使 用 方法 。 


6.6.1 实例 : 插入 图 像 


在 HTML4 中 可 以 使 用 img 标签 插入 一 个 图 像 , 而 在 HIML5 中 , 可 以 使 用 canvas 的 drawImage 
函数 直接 在 指定 位 置 插入 图 像 。 插 入 图 像 的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.6.1.html</title> 

</head> 

<body> 

<canvas id="myCanvas"” width="400"” height="400"> 您 的 浏览 器 不 支持 canvas 标签 
</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById ("myCanvas"); 

var cxt=c.getContext ("2d"); 


var img=new Image(); // 创 建 一 个 图 片 数 组 

img.src="img01.png"; // 设 置 图 片 路 径 

img.onload=function(){ // 为 图 片 加 载 一 个 onload 事件 
cxt.drawImage (img, 0,0); // 加 载 图 片 

}; 

</script> 

</body> 

</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 
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onload 事件 


onload 事件 会 在 图 像 或 页 面 加载 完 成 后 立即 发 生 ， 本 例 中 添加 此 事件 主要 是 解决 页 面 加 


提 未 。 载 和 刷新 时 不 显示 图 像 的 问题 . 
6.6.2 ”实例 : 平 铺 图 像 


在 绘制 平 铺 图 像 时 ， 需 要 用 到 canvas 的 createPattem 函数 。 该 函数 有 两 个 参数 : 第 一 个 参数 
是 需要 平 铺 的 图 像 ， 第 二 个 参数 是 确定 以 哪 种 方式 进行 平 铺 ， 可 用 的 选项 包括 repeat (在 水 平和 垂 


直方 向 重复 ) 、repeat-x (在 水 平方 向 重复 ) 、repeat-y (在 垂直 方向 重复 ) 和 no-repeat (不 本 
绘制 水 平和 垂直 方向 重复 的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.6.2.html</title> 

</head> 

<body> 

<canvas id="myCanvas"” width="600"” height="400"> 您 的 浏览 器 不 支持 canvas 标签 
</canvas> 


<script type="text/javascript"> 
Var image = new Image(); 
var canvas = document .getElementById ("myCanvas"); 
var ctx = canvas.getContext ("2d"); 
image.src = "002.png"; 
image.onload = function () { 
Var ptrn = ctx.createPattern (image, "repeat"); 
ctx.fillstyle = ptrn; 
ctx.fillRect (0, 0, 600, 600); 
}; 


</script> 
</body> 
</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 
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一 -条 一 一 -修一 一 -条 一 一 -人 一 一 -一 一 - 趟 -一 一 -一 一 -二 一 一 -一 一 -一 一 -人 一 一 -一 
实践 : 练习 其 他 平 铺 模 式 
本 例 中 ， 我 们 练习 了 垂直 和 水 平 重复 的 平 铺 模 式 ， 有 兴趣 的 读者 可 以 练习 一 下 其 他 平 铺 模式 。 
问 : 哪 种 方式 是 平 铺 的 默认 方式 ? 
答 : repeat 是 平 铺 的 默认 方式 ， 即 在 水 平和 垂直 方向 上 重复 。 
一 -条 一 一 - 寺 一 一 -条 一 一 - 直 一 一 - 寺 一 一 -一 一 -一 一 - 寺 一 一 -一 一 -一 一 -一 一 -一 
6.6.3 实例: 裁剪 图 像 
canvas 允许 用 户 在 绘制 图 像 时 对 绘制 的 图 形 进行 裁剪 操作 ， 此 时 需要 用 到 绘制 图 像 函数 。 该 
函数 有 多 个 重 载 方 法 ， 分 别 如 下 : 
drawImage (img, x, y); 


drawImage (img, x,y, width, height); 
drawImage (img, sx, sy, swidth, sheight, x,y,width,height); 


这 三 个 函数 的 参数 说 明 如 下 表 所 示 。 


| 


img 规定 要 使 用 的 图 像 、 画 布 或 视频 

SX 可 选 。 开 始 剪 切 的 x 坐标 位 置 

sy 可 选 。 开 始 剪 切 的 y 坐标 位 置 

swidth 可 选 。 被 剪 切 图 像 的 宽度 

sheight 可 选 。 被 剪 切 图 像 的 高 度 

x 在 画布 上 放置 图 像 的 x 坐标 位 置 

y 在 画布 上 放置 图 像 的 y 坐标 位 置 

width 可 选 。 要 使 用 的 图 像 的 宽度 〈 伸 展 或 缩小 图 像 》 
height 可 选 。 要 使 用 的 图 像 的 高 度 〈 伸 展 或 缩小 图 像 ) 


使 用 canvas 裁剪 图 像 的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.6.3.html</title> 

</head> 

<body> 

<canvas id="myCanvas"” width="400"” height="400"> 您 的 浏览 器 不 支持 canvas 标签 
</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById ("myCanvas"); 

Var cxt=c.getContext ("2d"); 


Var img=new Image () 7 
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img.src="img01.png"7 
img.onload=function(){ 
cxt .drawImage (img,100,100,100,100,0,0,100,100); 
}; 
</script> 
</body> 
</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


6.6.4 实例 : 像素 级 操作 


图 像 都 是 由 一 个 个 像素 点 组 成 的 ， 根 据 各 像素 点 颜色 分 配 的 不 同 ， 呈 现 出 不 同 的 图 像 。canvas 
提供 了 可 以 直接 通过 修改 像素 点 颜色 的 方法 , 用 于 对 图 像 进 行 各 种 操作 。 通过 修改 像素 反 转 图 像 颜 
色 的 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>6.6.4.html</title> 
</head> 
<body> 
<canvas id="myCanvas" width="400"” height="400"> 您 的 浏览 器 不 支持 canvas 标签 
</canvas> 
<script type="text/javascript"> 
Var c=document .getElementById("myCanvas"); 
Var ctx=c.getContext ("2d"); 
Var img=new Image(); 
img.src="img01.png"; 
img.onload=function(){ 
ctx.drawImage (img,0,0); 
Var imgData=ctx.getImageData(0,0,c.width,c.height); 
// 反 转 颜色 
for (var i=0;i<imgData.data.length;i+=4) { 
imgData.data[i]=255-imgData.data[i]; 
imgData.data[i+1]=255-imgData.data[i+1]; 
imgData.data[i+2]=255-imgData.data[i+2]; 
imgData.data[li+3]=255; 
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} 
ctx.putImageData (imgData, 0,0); 
] 7 
</script> 
</body> 
</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


服务 器 浏览 
三。 由 于 本 例 使 用 了 getImageData 函数 获取 图 片 数 据 ， 该 函数 在 Google Chrome 等 浏览 器 
提 示 。 中 会 涉及 跨 域 问题 ， 因 此 无 法 直接 在 浏览 器 中 浏览 ， 必 须 通过 服务 器 来 访问 。 笔 者 扒 
荐 安装 XAMPP 来 浏览 此 功能 效果 。 


6.7 绘制 文字 


文字 是 网 页 中 必 不 可 少 的 内 容 ， 可 以 在 HTML 中 直接 输入 文字 ， 也 可 以 通过 canvas 设置 文本 
的 字体 、 大 小 和 样式 ， 在 网 页 中 呈现 不 同 的 文字 效果 。 
6.7.1 实例 : 控制 文本 的 字体 、 大 小 和 样式 


canvas 提供 了 设置 文本 字体 、 大 小 和 样式 的 函数 ， 这 个 函数 就 是 font,， 包括 5 个 参数 ， 依 次 代 
表 文字 的 字体 样式 、 字 体 变 体 、 字 体 粗细 、 字 体 大 小 和 字体 系列 。 以 下 代码 就 是 font 函数 的 应 用 : 


ctx.font="italic small-caps bold 1l2px arial"7 


有 关 font 函数 参数 的 详细 描述 请 参照 下 表 。 
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值 描 述 

规定 字体 样式 。 
normal 

italic 

oblique 

规定 字体 变 体 。 
font-variant normal 
small-caps 
规定 字体 粗细 。 可 能 的 值 : 
normal 

bold 

bolder 

lighter 

100 

200 

300 

400 

500 

600 

700 

800 

900 


font-size / line-height 规定 字号 和 行 高 ， 以 像素 计 
font-family 规定 字体 系列 


设置 了 文本 的 字体 、 大 小 和 样式 后 ， 通 过 fillText 函数 完成 文字 的 绘制 。 通 过 canvas 绘制 文字 
的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.7.1.html</title> 

</head> 

<body> 

<canvas id="myCanvas" width="400"” height="400"> 您 的 浏览 器 不 支持 canvas 标签 
</canvas> 


S| 


[能 的 值 : 


font-style 


S| 


[能 的 值 : 


font-weight 


<script type="text/javascript"> 

Var c=document .getElementById("myCanvas"); 
var ctx=c.getContext ("2d"); 

ctx.font="italic small-caps bold S50px Arial™; 
ctx.fillText ("Hello! Canvas",10,50); 
</script> 
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</body> 
</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 
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HEeLLo! CANVAS 


6.7.2 实例: 控制 文本 的 颜色 


canvas 中 有 两 种 方法 可 用 于 改变 文本 的 颜色 : 一 种 是 通过 fillStyle 函数 设置 文本 的 填充 颜色 ， 


另 一 种 是 通过 createLinearGradient 函数 为 文字 填充 渐变 色 。 控 制 文本 颜色 的 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.7.2.html</title> 

</head> 

<body> 

<canvas id="myCanvas"” width="400"”height="400"> 您 的 浏览 器 不 支持 canvas 标签 
</canvas> 


<script type="text/javascript"> 

Var c=document .getElementById("myCanvas"); 
Var ctx=c.getContext ("2d"); 

// 创 建 单 色 字 体 

ctx.font="50px Georgia"; 
ctx.fillstyle="blue"; 

ctx.fillText ("Hello Canvas!",10,50); 

// 创 建 渐变 字体 

ctx.font="50px Verdana"; 

Var gradient=ctx.createLinearGradient (0,0,c.width, 0); 
gradient .addColorstop("0", "magenta"); 
gradient .addColorstop("0.5", "blue"); 
gradient .addColorstop("1.0", "red"); 
ctx.fillstyle=gradient; 

ctx.fillText ("Hello Canvas!",10,90); 
</script> 

</body> 

</html> 
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在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


Hello Canvas! 


Hello Canvas! 


一 -一 一 -和 一 一 -人 一 一 -人 一 一 -人 一 一 -一 一 个 一 一 -一 一 二 一 一 个 一 一 -一 一 -一 
思考 : 设置 文本 颜色 


通过 线性 渐变 的 方式 可 以 设置 文本 的 颜色 ， 那 么 通过 径 向 渐变 的 方式 是 否 也 可 以 设置 文本 的 
颜色 呢 ? 有 兴趣 的 读者 可 以 动手 试 一 试 。 
一 -条 一 一 - 打 一 一 - 打 一 一 -村 一 一 -一 一 -一 一 -一 一 -村 一 一 -一 一 到 -一 一 -一 一 -一 


6.7.3 实例 : 描绘 文本 的 边缘 


如 果 要 描绘 字体 边缘 的 效果 , 就 需要 使 用 strokeText 函数 蔡 代 fnlText 函数 , 同时 用 strokeStyle 
属性 蔡 代 fnlStyle 属性 。 描 绘 文本 边缘 的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.7.3.html</title> 

</head> 

<body> 

<canvas id="myCanvas"” width="400"” height="400"> 您 的 浏览 器 不 支持 canvas 标签 
</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById("myCanvas"); 

Var ctx=c.getContext ("2d"); 

ctx.font="50px Verdana"; 

// 创建 渐变 

var gradient=ctx.createLinearGradient (0,0,c.width, 0); 

gradient .addColorstop ("0", "magenta"); 

gradient .addColorstop("0.5", "blue"); 

gradient .addColorstop("1.0", "red"); 

// 用 渐变 填 色 

ctx.strokestyle=gradient; 

ctx.strokeText ("Hello Canvas!",10,90); 

</script> 

</body> 

</html> 
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在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


加 473hm - 
€ 3 © Glocalhost/HIM 


Hello Cani 


如 果 要 同时 填充 字体 和 描绘 字体 边缘 ， 就 必须 同时 使 用 fillText 和 strokeText 函数 。 而 
注意 且 记 得 要 先 执行 fllText， 然 后 执行 strokeText。 


6.7.4 实例 : 设置 文本 对 齐 方式 


canvas 中 文本 的 对 齐 功能 使 用 textAlign 属性 进行 控制 ， 可 供 选 择 的 项 包括 start、end、left、 
center 和 right。 对 齐 的 位 置 是 相对 于 一 条 虚拟 的 垂直 线 , 这 条 线 是 由 filText0O 或 strokeText0 定 义 
的 文本 x 位 置 。 默 认 情 况 下 ，textAlign 属性 被 设置 成 start。 

文本 被 左 对 齐 的 情况 包括 : 


(1) textAlign 属性 被 设 为 left 时 ; 
(2) textAlign 属性 被 设 为 start ， 且 文档 方向 是 ltr (left to righb 时 ; 
(3) textAlign 属性 被 设 为 end ， 且 文档 方向 是 rtl (right to left) 时 。 


文本 被 右 对 齐 的 情况 包括 : 


(1) textAlign 属性 被 设 为 right 时 ; 
(2) textAlign 属性 被 设 为 start ， 且 文档 方向 是 rtl (right to left) 时 ; 
(3) textAlign 属性 被 设 为 end ， 且 文档 方向 是 ltr (left to right) 时 。 


设置 文本 对 齐 的 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>6.7.4.html</title> 
</head> 
<body> 
<canvas id="myCanvas"” width="400"” height="400"> 您 的 浏览 器 不 支持 canvas 标签 
</canvas> 
<script type="text/javascript"> 
Var c=document .getElementById ("myCanvas"); 
Var ctx=c.getContext ("2d"); 
var x = c.width / 2; 
Var y = c.height / 2; 
ctx.font = "30pt Calibri"™; 
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ctx.textAlign = "Center"7 
ctx.fillStyle = "blue"? 
ctx.fillText ("Hello Canvas!", zx, y); 

</script> 

</body> 

</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


人 © D localhost/HTMLSCSS3/4/4.7.4.html 


Hello Canvas! 


6.8 图 像 数据 与 URL 


网 页 中 使 用 的 各 种 图 像 数 据 在 canvas 中 都 有 不 一 样 的 展现 和 存储 方式 ， 传 统 的 图 像 存 储 是 使 
用 img 标签 将 服务 器 的 图 片 引用 到 页 面 ， 而 在 canvas 中 ， 图 像 被 转换 成 base 64 编码 的 字符 串 形式 
并 存储 在 URL 中 ， 这 对 提升 网 站 的 加 载 速度 有 很 大 的 帮助 。 


6.8.1 存储 图 像 数据 


如 果 和 希望 某 些 图 像 数 据 与 HIML 或 者 CSS 文件 保存 在 一 起 ,以 便 用 户 在 浏览 时 能 够 通过 缓存 
快速 访问 ， 就 可 以 使 用 HIML5 中 特殊 的 图 像 存储 方式 ， 即 使 用 base 64 编码 的 字符 串 形式 将 图 像 
存储 在 URL 中 。 以 下 代码 显示 了 如 何 使 用 这 种 方式 存储 图 像 数据 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.8.1.html</title> 

</head> 

<body> 

<img src="data:image/png;base64, iVBORWOKGgOoAAAANSUhEUgAAAA4AAAAKCAIAAAALUu/ 
iQAAAABMJLROQA/wD/AP+gvaeTAAAACXBIWXMAAATEAAAOxAGVKWwAbDAAABJE1EQVQY1T2Pva7CMAxX 
GHWOPgBIQDKY8/ 8bLIMRSxNLSSkUtSZvm5/MAdIt3NHnzOsbndbszMzADatvXe7/f7w+Gw3W6JaFmW 
dV3v93tdlwLAGANAVc/nsépuNhtmJqKUkqoS0eVyaZpGiCjGWA6qqiprgREREYUQiMg5J60KgIhEJ 
ISQUiIiRAABEhJm99wC895JzNsao6rIsxhhjTRAkoc0pPXddxHEWEC8RA5N01TQOapqSVTVEMI8z03TRB 
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AAzDxNUwihqipmLkkxxpyztfb7/XZzd130WtmlPp1MI4f93AEXqnBuG4f1+F5s8HO/r9Rpj3012AKy 
lltphGD6fzzzPzrm+74/HY855k3Mex7Hv+xACgKT1rXq/X8/ms6/r3+41IUS3L8gfJjQsOtoY+mQAA 
AABJRUS5ErkJggg=="> 

</body> 

</html> 


6.8.2 ”将 彩色 转 为 灰 度 


在 6.6.4 实例 中 , 我 们 通过 getImageData 和 putImageData 函数 成 功 反 转 了 一 个 图 像 的 颜色 , 使 
用 这 两 个 函数 ， 通 过 不 同 的 算法 还 可 以 将 彩色 图 像 转换 成 灰 度 图 像 。 相 关 代 码 如 下 : 
<!doctype html> 
<html> 
<head> 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>6.8.2.html</title> 
</head> 
<body> 
<img id="canvasSource" src="img01.png" alt="Canvas Source" /> 
<canvas id="myCanvas"” width="500"” height="300"> 您 的 浏览 器 不 支持 canvas 标签 
</canvas> 
<!-- Javascript Code --> 
<script type="text/javascript"> 
window.onload = function() { 
Var canvas = document .getElementById("myCanvas"); 
Var context = canvas.getContext ("2d"); 
Var image = document .getElementById("canvasSource"); 
context.drawImage (image, 0, 0); 
var imgd = context.getImageData(0, 0, image.width, image.height); 
var pix = imgd.data; 
for (var i = 0, n = pix.length; i <n; i+= 4) { 
Var grayscale = pix[i] * -3 + pix[i+1] * .59 + pix[i+2] * ,11 
pix[i] = grayscale; // 红色 
pix[i+1] = grayscale;  // 绿色 
pix[i+2] = grayscale;  // 蓝 色 
// alpha 
} 
context .putImageData(imgd, 0, 0); 
}; 
</script> 
</body> 
</html> 
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在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


【分 服务 器 浏览 


提示。 此 效果 需要 在 服务 器 上 浏览 。 
6.8.3 图 像 数 据 URL 


如 果 要 将 图 像 数据 以 URL 的 形式 保存 ， 首 先 需 要 将 这 些 图 像 文件 转换 成 base 64 编码 的 字符 
串 。 其 实 有 很 多 工具 都 可 以 使 用 ， 这 里 提供 一 个 在 线 转换 工具 ， 只 要 打开 网 址 http://dataurl.net/ 
#dataurlmaker， 然 后 选择 要 转换 的 图 片 ， 就 会 得 到 想 要 的 结果 ， 如 下 图 所 示 。 


6.8.4 ”将 绘制 的 图 形 保存 为 图 像 文件 
使 用 canvas 不 但 可 以 加 载 图 像 文 件 ， 还 可 以 将 绘制 的 图 形 保存 为 图 像 文 件 。 保 存 canvas 图 像 
文件 的 代码 如 下 : 


<!goctype html> 
<html> 
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<head> 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.8.3.html</title> 

</head> 

<body> 

<canvas id="myCanvas"” width="400"” height="400"> 您 的 浏览 器 不 支持 canvas 标签 

</canvas> 
<script type="text/javascript"> 
Var canvas = document .getElementById("myCanvas"); 
Var context = canvas.getContext ("2d"); 
context .fillstyle = "rgb(0,0,225)"; 
context .fillRect (0, 0, canvas.width, canvas.height); 
context .fillSstyle = "rgb(255,255,0)"; 
context.fillRect (10, 20, 200, 350); 
// 把 图 像 保 存 到 新 的 窗口 
Var w=window.open (canvas .toDataURL ("image/jpeg"),"smallwin", 
"width=400,height=350"); 

</script> 

</body> 

</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


[ET 
¢ 了 CDiocihost Ea 


6.9 用 canvas 实现 动画 效果 


了 解 Flash 的 读者 都 知道 , 动画 是 由 一 帧 帧 的 图 像 组 合 而 成 的 , 如 果 要 在 canvas 中 实现 动画 效 
果 ， 就 需要 在 canvas 中 间隔 一 定时 间 绘制 多 幅 连 续 运动 的 图 像 。 
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6.9.1 实例 : 清除 canvas 的 内 容 


既然 能 够 在 canvas 中 绘制 图 形 ， 那 么 是 否 也 能 够 在 canvas 中 清除 内 容 呢 ? 答案 是 肯定 的 。 
canvas 中 提供 的 clearRect(x,y,width,height) 函 数 用 于 清除 图 像 中 指定 矩形 区 域 的 内 容 。 清 除 canvas 
内 容 的 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.9.1.html</title> 

</head> 

<body> 

<canvas id="myCanvas"” width="400"” height="400"> 您 的 浏览 器 不 支持 canvas 标签 
</canvas> 


<script type="text/javascript"> 
Var c=document .getElementById ("myCanvas"); 
Var ctx=c.getContext ("2d"); 
ctx.fillstyle="blue"; 
ctx.fillRect (0,0,400,200); 
ctx.clearRect (50,50,150,100); 

</script> 

</body> 

</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 


加 49thtml 
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中 区 
除了 系统 提供 的 clearRect 函数 ， 我 们 还 可 以 在 canvas 中 绘制 一 个 相同 大 小 ,填充 色 与 背 
景色 相同 的 图 像 ， 用 于 覆盖 要 清除 的 内 容 ， 这 样 也 可 以 达到 清除 内 容 的 目的 。 


6.9.2 ”实例 : 创建 动画 
掌握 了 以 上 知识 后 ， 让 我 们 来 动手 练习 创建 一 个 简单 的 动画 。 具 体 步骤 如 下 : 
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人 Ti 指定 坐标 点 (100,100) 为 圆心 绘制 半 径 为 0 的 
C02 间隔 10 毫秒 后 ， 清 除 之 前 绘制 的 图 形 。 

再 次 以 坐标 点 (100.100) 为 圆心 . 绘制 半径 为 1 的 圆 . 以 此 类 推 . 直到 贺 的 半径 等 于 100. 
人 4 继续 以 坐标 点 (100,100) 为 圆心 . 绘制 半径 为 99 的 圆 . 以 此 类 推 , 直到 圆 的 半径 等 于 0， 
人 05 再 增加 加 的 半径 ， 让 动画 往返 运动 。 

创建 动画 的 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.9.2.html</title> 

</head> 

<body> 

<canvas id="myCanvas" width="500"” height="500"> 您 的 浏览 器 不 支持 canvas 标签 


玩 


</canvas> 


<script type="text/javascript"> 

Var canvas = document .getElementById('myCanvas'); 

Var ctx=canvas.getContext ("2d"); 

var dir=0; 

var width=500; 

var height=500; 

Var per=1; // 每 次 增加 的 半径 值 
function action(){ 

ctx.clearRect (0,0,width, height); 


ctx.fillstyle="red"; // 设 置 颜色 
ctx.beginPath () // 开 始 新 的 绘画 
ctx.arc(260,260,dir,0,Math.PI*2); // 绘 制 圆 
ctx.closepPath () // 结 束 画 布 
GEE // 结 束 泻 染 
dir=dirtper; 
if(dir==0 || dir==height/2)1{ // 判 断 圆 的 半径 大 小 
per=per*-1; // 往 相反 的 方向 运动 
} 
} 
onload=setInterval (action,10); // 每 隔 10 毫秒 重新 绘制 一 次 图 形 
</script> 
</body> 
</html> 


在 Chrome 浏览 器 中 的 预览 效果 如 下 图 所 示 。 
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6.9.3 动画 的 开始 与 停止 
我 们 在 HTML 中 添加 两 个 按钮 ， 分 别 用 于 控制 动画 的 开始 与 停止 。 添 加 的 代码 如 下 : 


<button onclick="tt=setInterval (action,10) "> 开始 </button> 

<button onclick="clearInterval (tt);"> 停 止 </button> 

这 里 的 setInterval 用 于 控制 时 间 间 隔 ， 设 置 影响 的 函数 为 action， 设 置 时 间 间 隔 为 10 毫秒 ， 
并 用 变量 tt 接收 返回 值 。 停 止 按钮 调用 clearInterval 函数 ， 取 消 由 setInterval 设置 的 时 间 间 隔 。 需 
要 注意 的 是 ， 因 为 现在 我 们 通过 按钮 来 控制 动画 的 开始 与 停止 ， 所 以 必须 删除 6.9.2 代码 中 的 以 下 
代码 : 


onload=setInterval (action,10); 


添加 了 开始 和 停止 按钮 后 效果 如 下 图 所 示 。 


6.10 ”实战 演练 


这 次 实战 演练 我 们 将 使 用 canvas 的 各 种 API 绘制 如 下 图 所 示 的 时 钟 。 通 过 本 次 演练 ， 巩 固 本 
章 所 学 的 各 种 canvas 绘制 图 形 的 功能 。 
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ED) 打开 Dreamweaver CC 应 用 程序 ， 新 建 一 个 HTML 文件 并 保存 。 
人 2 首先 在 HTML 的 body 标签 中 添加 一 个 canvas 标签 ， 用 于 绘制 时 钟 。 


<canvas id="myCanvas" width="600"” height="300"> 您 的 浏览 器 不 支持 canvas 标签 
</canvas> 


ER3 然后 在 JavaScript 中 通过 getElementById 函数 得 到 canvas 对 象 ， 并 创建 画笔 。 


Var c = document .getElementById ("myCanvas"); 
Var cxt = c.getContext ("2d"); 


E04 定义 三 个 变量 ，slen 表示 秒针 ，mlen 表示 分 针 ，hlen 表示 时 针 ， 并 分 别 赋值 ， 


var slen = 60; mlen = 50 hlen = 40; 


人 65 开始 绘制 图 形 ， 设 置 填充 色 为 蓝 色 ， 以 坐标 点 (200,150) 为 圆心 ， 半 径 为 100， 起 
始 弧度 为 0， 终止 弧度 为 360” ,绘制 一 个 圆 形 ， 最 后 关闭 绘制 路 径 。 
cxt.beginPath() 7 


cxt.strokestyle = "#00f"; 

cxt.arc(200, 150, 100, 0, 2 * Math.PI, true); 
cxt.stroke(); 

cxt.closePath(); 


GET06 重新 开始 绘制 图 形 , 将 当前 起 始点 移动 到 坐标 点 (200,150) ， 并 将 当前 坐标 系 逆 时 针 
旋转 90”， 最 后 保存 当前 路 径 。 

cxt .beginpath(); 

cxt.translate (200, 150); / /平移 当前 起 始点 坐标 

cxt.rotate(-Math.PI / 2); // 道 时 针 旋转 90° 

cxt.save(); // 保 存 当前 路 径 


C7 rotate(angle) 方 法 用 于 旋转 当前 绘图 ， 参 数 angle 表示 旋转 角度 ， 以 弧度 计算 如 果 需要 
提示 将 角度 转换 成 弧度 ， 就 使 用 degrees*Math.PI/180 公式 进行 计算 ，degrees 表示 角度 。 

C07 接 下 来 需要 通过 一 个 算法 绘制 时 钟 刻度 和 数字 ， 并 且 在 每 5 个 刻度 后 将 当前 坐标 系 
顺 时 针 旋 转 60” ， 最 后 关闭 路 径 。 

for (var 1 = 0; 1 < 607 +4+) { 

if ( 主 名 5== 0){ 
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cxt.fillRect (80, 0, 20, 5); / /绘制 长 刻度 
Cut TilText("" P(E /5 = 0 7 12 LN Se 0 ON V/V/ 摊 抽 白字 
} else { 
cxt- FILIRectE(90, 0, 3102 2)3 / /绘制 短 刻度 
js 
cxt.rotate (Math.PI / 30); // 顺 时 针 旋转 60” 
} 
cxt.closePath(); // 关 闭路 径 


定义 三 个 变量 : ls 代表 当前 时 间 的 秒 ，lm 代表 当前 时 间 的 分 : 了 h 代表 当前 时 间 的 小 


ERs 
， 并 为 其 赋 初 始 值 0。 

var ls=0, Im=0, lh=0; 

E09 定义 一 个 函数 ， 该 函数 每 秒 执行 一 次 


function Refresh() { 


cxt. 
cxt. 
cxt. 
cxt. 
Cxt. 
Cxt. 
Cxt. 


cxt 


cxt. 
Cxt. 
cxt. 


Var 


BS 
上 


Festore () 7 

Save () 7 

rotate(ls * Math.PI / 30); 
clearRect (5, -1, slent+l, 2+2); 
restore(); 

save () 7 

Frotate (lm * Math.PI / 30) 


.ClearRect (5，-1，mlen+1，3+2) 7 
cxt. 


restore(); 

save () 7 

rotate(lh * Math.PI / 6); 
clearRect (5, -3, hlen+l, 4+2); 
time = new Date(); 

s = ls=time.getSeconds(); 
lm=time.getMinutes () 7 

h = lh=time.getHours () 7 


.restore(); 

.Save (); 

-rotate(s * Math.PI / 30); 
:ETUIRecE(S5ALORISLen7 2)7 
.restore () 7 

.Save (); 

-rotate(m * Math.PI / 30); 
:fiTlRect(5, 0; mleny 3); 
-restore(); 

-Save (); 

.rotate(h * Math.PI / 6); 
sfillRect(S, “2 hlene 4)3 


， 用 于 重新 绘制 时 针 . 分 针 和 秒针 。 


// 恢 复 之 前 的 状态 
// 保 存 状态 

// 根 据 秒针 旋转 坐标 
// 清 除 秒针 

// 恢 复 之 前 的 状态 
// 保 存 状态 

// 根 据 分 针 旋转 坐标 
// 清 除 分 针 

// 恢 复 之 前 的 状态 
// 保 存 状态 

// 根 据 时 针 旋 转 坐 标 
// 清 除 时 针 

// 获 取 当前 时 间 
// 获 取 秒 

// 获 取 分 

// 获 取 小 时 

// 恢 复 之 前 的 状态 
// 保 存 状态 

// 根 据 秒 旋转 坐标 
// 绘 制 秒针 

// 恢 复 之 前 的 状态 
// 保 存 状 态 

// 根 据 分 旋转 坐标 
// 绘 制 分 针 

// 恢 复 之 前 的 状态 
// 保 存 状态 

// 根 据 小 时 旋转 坐标 
/7 绘制 时 针 
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此 函数 中 频繁 使 用 了 cxtrestore0 和 cxtsave0 函 数 ， 这 是 因为 每 次 对 绘图 对 象 的 改变 都 
e 会 影响 到 它 的 状态 ， 所 以 这 里 需要 先 取 到 上 一 次 保存 的 状态 ， 然 后 立即 进行 保存 ,最 


注意 0 3 
后 执行 其 他 操作 ， 这 样 就 可 以 保证 每 次 取 到 的 绘图 对 象 都 是 一 样 的 。 

人 ERIO 设置 每 秒 正 刷新 一 次 。 

Var MyInterval = setInterval ("Refresh();", 1000); 

i 至 此 ， 就 完成 了 使 用 canvas 绘制 时 钟 的 所 有 操作 。 完 整 的 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.10.1</title> 

</head> 

<body> 

<canvas id="myCanvas"” width="600"” height="300"> 您 的 浏览 器 不 支持 canvas 标签 

</canvas> 


<script type="text/javascript"> 
Var c = document .getElementById ("myCanvas"); 
Var cxt = c.getContext ("2d"); 


var slen = 60; 
var mlen = 50; 
var hlen = 40; 


cxt.strokeRect (0, 0, c.width, c.height); 
cxt .beginPath(); 
cxt.strokeStyle = "#00f"; 
cxt.fillSstyle = "#00f"; 
cxt .arc(200, 1506 Sy .9 2 * Math.Prl, true)'s 
ort 
cxt.closePath(); 
cxt .beginPath(); 
cxt.strokeSstyle = "#00f"; 
cxt.arc(200, 150, 100, 0, 2 * Math.PI, true); 
cxt.stroke(); 
cxt.closePath(); 
cxt.beginPath(); 
cxt.translate(200, 150); 
cxt.rotate(-Math.PI / 2); 
cxt.save(); 
for (var = On 3 < 00 4+ HF 

if (i % 5== 0) { 

cxt.fillRect (80, 0, 20, 5); 
Ds 4 > Gh, 0 0 1 
} else { 
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cxt.fillRect (90, 0, 10, 2) 


} 

cxt .rotate (Math.PI / 30); 
} 
cxt.closePath(); 
var ls= 0, lm= 0, lh = 0; 


function Refresh() { 


cxt.restore(); 

Cxt.save () 7 

cxt.rotate(ls * Math.PI / 30); 
CXL-.ClearRect(5，=1，Slen+1，2+2) 7 
cxt.restore(); cxt.save(); 
cxt.rotate (lm * Math.PI / 30); 
cxt.clearRect (5, -1, mlen+l, 3+2); 
cxt.restore(); cxt.save(); 
cxt.rotate(lh * Math.PI / 6); 
cxt.clearRect (5, -3, hlen+l, 4+2); 
Var time = new Date(); 


Var s = ls=time.getSeconds(); 
Var m = lm=time.getMinutes () 7 
Var h = lh=time.getHours(); 
cxt.restore(); 
cxt.save(); 
cxt.rotate(s * Math.PI / 30); 
cxt.fillRect (5, 0, slen, 2); 
cxt.restore(); cxt.save(); 
cxt.rotate(m * Math.PI / 30); 
cxt-tillRect(S5, 0 nleny 3)s 
Cxt.restore(); cxt.save(); 
cxt.rotate(h * Math.PI / 6); 
cxt .fillRect (5, -2, hlen, 4); 
} 


Var MyInterval = setInterval ("Refresh();", 1000); 
</script> 


<div id="divl" style=" background:#00f;"></div> 
</body> 
</html> 


测试 题 


(1) HTML5 中 的 canvas 元 素 用 什么 语言 实现 各 种 功能 ? 


(2) 使 用 canvas 绘制 一 个 半径 为 300 的 圆 ， 结果 只 能 显示 圆 的 一 部 分 ， 造成 这 种 现象 的 原因 


是 什么 ? 


(3) 在 绘制 线性 渐变 色 填充 时 ， 如 何 添加 渐变 色 ? 


(4) 在 HIML5 网 页 中 ， 可 以 使 用 几 种 方式 显示 一 副 图 像 ? 
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(5) 图 形 数据 URL 使 用 什么 编码 ? 
(6) 清除 canvas 的 内 容 有 哪 几 种 方法 ? 


6.11 本 章 小 结 


canvas 作为 HTML5 中 新 增 的 一 个 元 素 ， 为 绘制 丰富 多 彩 的 Web 页 面 提 供 了 更 多 的 可 能 。 本 
章 主 要 学 习 了 如 何 使 用 canvas 绘制 基本 图 形 、 绘 制 渐变 图 形 、 绘 制 组 合 图 形 ， 以 及 对 图 像 的 各 种 
操作 ， 对 文字 的 处 理 ， 图 形 数 据 与 URL 的 使 用 ， 同 时 还 学 习 了 使 用 canvas 动画 效果 。 通 过 本 章 的 
学 习 ， 用 户 应 该 熟练 掌握 以 上 内 容 。 对 于 JavaScript 比较 薄弱 的 读者 ， 要 想 掌 握 好 canvas 的 使 用 ， 
还 需要 继续 加 强 在 JavaScript 上 的 练习 。 


HTML5 SVG 


在 HTML 文档 中 可 以 嵌入 各 种 各 样 的 图 片 资源 ， 然 而 不 同 的 图 片 在 特定 条 件 下 显示 的 效果 却 
大 相 径 庭 ,比如 在 相同 分 辨 率 下 , 栅 格 图 像 和 矢量 图 像 显 示 效 果 就 相差 甚 远 。 本 章 将 要 介绍 的 SVG 
就 是 一 种 矢量 图 像 的 绘制 方法 , 不 同 于 一 般 的 矢量 图 形 , 它 具 有 XML 的 属性 ， 且 只 需要 一 个 SVG 
元 素 就 可 以 完成 一 幅 图 像 的 绘制 。 


7.1 SVG 简介 


SVG (Scalable Vector Graphics) 是 一 种 用 来 绘制 矢量 图 的 HIMLS 标签 ， 由 万 维 网 联盟 制定 ， 
是 一 种 基于 可 扩展 标记 语言 ， 用 于 绘制 二 维 可 缩放 矢量 图 形 的 标准 。 


7.1.1 什么 是 SVG 


SVG 是 一 种 使 用 XML 来 描述 二 维 图 形 的 语言 ， 允 许 三 种 类 型 的 图 形 对 象 : 矢量 图 形 、 图 像 
和 文本 。SVG 是 可 伸缩 的 矢量 图 形 ， 定 义 用 于 网 格 的 基本 矢量 图 形 ， 它 使 用 XML 格式 定义 图 形 ， 
图 像 在 放大 或 缩小 的 情况 下 ， 其 图 形 质量 不 会 有 损失 。 


7.1.2 SVG 有 哪些 优势 


虽然 SVG 与 其 他 图 像 格式 一 样 都 用 于 展示 图 形 ， 但 是 SVG 却 有 着 更 多 的 优势 ， 具 体 表 现在 
以 下 几 个 方面 。 


(1) SVG 可 被 多 种 工具 读 取 和 编辑 ， 甚 至 是 记事 本 。 

(2) SVG 与 JPEG 和 GIF 图像 相 比 ， 尺 寸 更 小 ， 可 压缩 性 更 强 。 
(3) SVG 是 可 伸缩 的 矢量 图 形 。 

(4) SVG 图 像 可 以 在 任何 分 辨 率 下 被 高 质量 的 打印 。 
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(5) SVG 图 像 在 放大 或 缩小 的 情况 下 ， 质 量 不 会 下 降 。 
(6) SVG 可 以 与 Java 技术 一 起 运行 。 

(7) SVG 是 开放 的 标准 。 

(8) SVG 是 一 种 XML 文本 。 


7.2 HTML5 中 的 SVG 


SVG 有 这 么 多 得 天 独 厚 的 优势 ， 本 节 就 通过 一 些 具体 的 实例 来 介绍 HTML5 中 SVG 的 使 用 方法 。 
7.2.1 实例 : 将 SVG 直接 嵌入 HTML5 页 面 


我 们 先 来 看 一 个 实例 ， 该 实例 的 效果 是 在 HTML5 页 面 中 绘制 图 形 。 相 关 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>7.2.1</title> 

</head> 

<body> 

<svg xmlns="http://www.w3.0rg/2000/svg" version="1.1"> 

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" 
fill="red" /> 

</svg> 

</body> 

</html> 


在 这 段 代码 中 ，SVG 代码 以 <svg> 元 素 开始 ， 包 括 开 启 标签 <svg> 和 关闭 标签 </svg>。width 和 
height 属性 设置 SVG 图 形 的 宽度 和 高 度 ，xmlns 属性 定义 SVG 的 命名 空间 ，version 属性 定义 使 用 
的 SVG 版 本 。 

<circle> 标 签 用 来 创建 一 个 圆 。cx 和 cy 属性 定义 圆 中 心 的 x 和 y 坐标 ， 如 果 忽 略 这 两 个 属性 ， 
那么 圆 点 会 被 设置 为 (0, 0)。r 属性 定义 圆 的 半径 。stroke 和 stroke-width 属性 控制 如 何 显示 形状 的 
轮廓 ， 这 里 我 们 把 圆 的 轮廓 设置 为 2px， 边 框 为 黑色 。fill 属性 设置 形状 内 的 颜色 ， 这 里 我 们 把 填 
充 颜 色 设 置 为 红色 。 


C7 所 有 的 开启 标签 必须 有 关闭 标签 。 
提 示 


效果 如 下 图 所 示 。 
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所 CC 口 Ilocalhost/HTMLSCSS3/5/5.21.html 


7.2.2 实例: 绘制 简单 的 形状 


使 用 SVG 可 以 绘制 一 些 基本 的 图 形 ， 如 直线 、 贺 形 、 和 矩形 、 椭 圆 、 多 边 形 、 曲 线 和 文本 等 ， 
本 实例 将 在 一 个 文档 中 绘制 这 些 图 形 。 相 关 代 码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>7.2.2</title> 

</head> 

<body> 

<svg xmlns="http://www.w3.org/2000/svg"” version="1.1" width="600" 
height="400"> 

<line x1="0" yl="0" x2="200" y2="0" style="stroke:blue;stroke-width:10"/> 

<circle cx="80" cy="80" r="60" stroke="blue" stroke-width="3" fill="red"/> 

<rect x="20" y="160" width="150" height="150" 
style="fill:red;stroke:blue;stroke-width:5;"/> 

<ellipse cx="300" cy="60" rx="100" ry="50" 
style="fill:red;stroke:blue;stroke-width:5"/> 

<polygon points="260,130 320,240 410,220" 
style="fill:red;stroke:blue;stroke-width:5"/> 

<polyline points="400,20 440,60 410,110 460,150 410,260 430,320" 

style="fill:none;stroke:blue;stroke-width:10" /> 

<text x="20" y="360"” fill="red"> 这 些 都 是 SVG 图 形 </text> 

</svg> 

</body> 

</html> 


绘制 的 图 形 效果 如 下 图 所 示 。 
@ line 元 素 用 于 绘制 直线 ， 属 性 x1 和 yl 分 别 定义 起 始点 的 xX 轴 和 yy 轴 坐 标 ，x2 和 y2 分 别 


e@ circle 元素 用 于 绘制 国 ， 属 性 cx 和 cy 分 别 定义 圆心 的 x 和 yy 坐标 ， 属 性 T 定 义 圆 的 半径 。 
如 果 省 略 cx 和 cy， 圆心 就 会 被 设置 为 (0,0)。 

@ rect 元 素 用 于 绘制 矩形 ， 属 性 X 和 y 用 于 定义 矩形 左上 角 点 坐标 ， 属 性 width 和 height 分 
别 定义 矩形 的 宽度 和 高 度 ， 
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e@ ellipse 元 素 用 于 绘制 桶 贺 ， 属 性 cx 和 cy 分 别 用 于 定义 椭圆 中 心 点 的 xX 轴 和 y 轴 坐标 ， 属 
性 rx 定义 水 平 轴 半 径 ， 属 性 Iy 定义 垂直 轴 半 径 。 

epolygon 元 素 用 于 绘制 多 边 形 ， 属 性 points 用 于 定义 多 边 形 每 个 角 点 的 xX 轴 和 yy 轴 坐 标 。 

e polyline 元 素 用 于 绘制 曲线 ， 且 曲线 的 每 一 个 部 分 均 由 直线 构成 ， 属 性 points 用 于 定义 曲 
线 中 直线 的 起 点 和 终点 坐标 。 

日 text 元 素 用 于 绘制 文本 ， 属 性 X 和 y 定 义 文本 的 起 始点 坐标 。 


7.2.3 ”实例 : 复 用 内 容 


使 用 SVG 绘制 图 形 后 ， 如 果 还 想 在 其 他 地 方 使 用 该 图 形 ， 最 有 效 的 方法 不 是 复制 粘贴 ， 而 是 
使 用 defs 元 素 标记 该 图 形 ， 然 后 使 用 use 元 素 即 可 实现 复 用 的 效果 。 相 关 代 码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
A 
</head> 
<body> 
<svg viewBox = "0 0 500 500" version = "1.1"> 
<defs> 
<circle id = "sl" cx = "100" cy = "100" r = "50" fil1l = "red" stroke 
= "blue" stroke-width = "3"/> 
</defs> 
<use x = "0" y = "0" xlink:href = "#s1"/> 
<use x = "50" y = "50" xlink:href = "#s1"/> 
</svg> 
</body> 
</html> 


在 本 例 中 ，des 元 素 标记 了 一 个 circle 元 素 ， 并 给 circle 元 素 设置 了 一 个 i4， 在 下 面 的 use 元 素 
中 ， 使 用 属性 x 和 y 设置 复 用 SVG 的 坐标 ， 该 坐标 值 会 被 添加 到 原始 坐标 中 ， 然 后 设置 属性 
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xlink:href="#s1" 的 方式 达到 复 用 的 效果 。 这 里 的 sl 就 是 circle 元 素 的 id 属性 。 本 例 效果 如 下 图 所 示 。 


€ 3 & Dlocalhos/HIMLSCSS3/5/5.23.htm 


7.2.4 实例 : 图 形 阴影 


图 形 阴 影 效 果 需 要 借助 SVG 的 滤 镜 功能 。 相 关 代 码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>7.2.4</title> 
</head> 
<body> 
<svg xmlns="http://www.w3.0rg/2000/svg" version="1.1"> 
<defs> 
<filter id="fl" x="0" y="0" width="200%" height="200%"> 
<feoffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> 
<feColorMatrix result="matrixOut" in="offOut" type="matrix" 
values="0.2 000000.2000000.20000010" /> 
<feGaussianBlur result="blurOut"” in="matrixOut" stdDeviation="10" /> 
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> 
</filter> 
</defs> 
<rect width="90" height="90" stroke="blue" stroke-width="5" fill="red" 
filter="url (#f1)" /> 
</svg> 
</body> 
</html> 


在 本 例 中 ， 为 <filter> 元 素 设置 id 属性 ， 用 于 确定 滤 镜 的 唯一 名 称 ，<rect> 元 素 的 filter 属性 用 
于 将 元 素 链接 到 皇 滤 镜 。<feGaussianBlur> 元 素 的 stdDeviation 属性 用 于 设置 模糊 量 ，<feOffse 人 元 
素 用 于 设置 阴影 的 位 移 。<feColorMatrix> 过 滤器 是 用 来 转换 偏 移 的 图 像 使 之 更 接近 黑色 的 颜色 。 阴 
影 效 果 如 下 图 所 示 。 
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€ 3 © |D localhost/HTMLSCSS3/5/5.24.htmi 


7.2.5 实例 : 图 形 渐变 


SVG 图 形 渐变 可 以 分 为 线性 渐变 和 放射 渐变 。 在 SVG 中 使 用 <linearGradient > 元 素 定义 线性 
渐变 。 相 关 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>7.2.5</title> 
</head> 
<body> 
<svg xmlns="http://www.w3.0rg/2000/svg" version="1.1"> 
<defs> 
<linearGradient id="gradl" xl="0%" yl="0%" x2="100%" y2="0%"> 
<stop offset="0%" style="stop-color:red;stop-opacity:1" /> 
<stop offset="100%" style="stop-color:blue;stop-opacity:1" /> 
</linearGradient> 
</defs> 
<ellipse cx="200" cy="70" rx="85" ry="55" fil1="url (#grad1)" /> 
</svg> 
</body> 
</html> 


在 本 例 中 ， 为 < linearGradient > 标签 设置 id 属性 ， 用 于 确定 渐变 的 唯一 名 称 。 属 性 x1、y1、 
x2、y2 用 于 设置 渐变 的 开始 和 结束 坐标 。<stop> 元 素 用 于 设置 渐变 的 颜色 ， 可 以 有 多 个 ，offset 属 
性 用 于 设置 渐变 的 位 置 ， 以 百分比 表示 。 

线性 渐变 的 效果 如 下 图 所 示 。 


€ 3 CDIocalhost/HTMLSCSS3/5/525html 
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根据 渐变 起 始 和 结束 坐标 的 不 同 ， 可 以 创建 三 种 线性 渐变 效果 。 当 y 坐标 相同 ,x 坐标 
不 同时 创建 水 平 渐变 ; 当 x 坐标 相同 , y 坐标 不 同时 创建 重 直 渐变 ; 当 X 坐标 和 y 坐标 
不 都 不 相同 时 ， 创 建 对 角 渐 变 。 


在 SVG 中 ， 使 用 <radialGradient> 元 素 定义 放射 渐变 。 相 关 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>7.2.6</title> 
</head> 
<body> 
<svg xmlns="http://www.w3.0rg/2000/svg" version="1.1"> 
<defs> 
<radialGradient id="gradl™" cx="20%" cy="30%" r="30%" fx="50%" fy="50%"> 
<stop offset="0%" style="stop-color:red; stop-opacity:0" /> 
<stop offset="100%" style="stop-color:blue;stop-opacity:1" /> 
</radialGradient> 
</defs> 
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url (#grad1)" /> 
</svg> 
</body> 
</html> 


在 本 例 中 ， 为 <radialGradient> 元 素 设 置 id 属性 ， 确 定 渐变 的 唯一 名 称 。 属 性 cx、cy 和 r+ 用 于 
设置 最 外 层 圆 的 圆心 和 半径 ， 属 性 父 和 人 f 用 于 设置 最 内 层 的 圆 。 放 射 渐变 的 效果 如 下 图 所 示 。 


B localhost/HTML5CSS3/5/5.2.6.html 


7.2.6 ”实例 : 绘制 自由 路 径 


使 用 SVG 的 <path> 元 素 可 以 绘制 更 加 复杂 的 图 形 。 我 们 先 来 看 一 个 实例 : 
<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>T2.1</title> 

</head> 
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<body> 

<svg xmlns="http://www.w3.o0rg/2000/svg" width="400" height="400" 
Version="1.1"> 

<path id="svg 1" 

=m T3001 1 S41275 -3 ZT =1919. -1801120-101157 =131197=90177=10113; 
i 19LS GE RISE 
MED ALL TAO LOLO L700 LOL 1 LOL T6071 13 22721 1250l 23r4D L13121SL3 38E 
9r111=57111-57121-1;,1513— 17141=1;101071518;12115,5120.819;0111,0114:0122, 4120, 
SITIOr SELI79L=20161 127 80 14.41- 21A11 -21721-1970E 307=31-2570E 14701- 12701-147 
21-20,01-25,-4z" stroke-width="5" stroke="#000000" fill="#FF0000"/> 

</svg> 

</body> 

</html> 


绘制 的 效果 如 下 图 所 示 。 在 本 例 中 ，<path> 元 素 用 于 绘制 自由 路 径 ， 属 性 d 用 于 设置 路 径 数据 。 
在 SVG 中 ，d 属性 可 以 包含 多 个 连续 的 指令 ， 这 些 指令 如 下 表 所 示 。 


指 令 | 参 数 说 明 

M xy 将 画笔 移动 到 点 (x,y) 

b xy 画笔 从 当前 的 点 绘制 线段 到 点 (x,y) 

H 入 画笔 从 当前 的 点 绘制 水 平 线段 到 点 (x.y0) 

V y 画笔 从 当前 的 点 绘制 垂直 直线 到 点 (x0.y) 

A IXIY x-axis-rotation large —arc -flag sweep-flag xy 画笔 从 当前 的 点 绘制 一 段 圆 弧 到 点 (xy) 

二 大 是 画笔 从 当前 的 点 绘制 一 段 三 次 贝 塞 尔 曲线 
到 点 (x.y) 

ny 特殊 版 本 的 三 次 贝 塞 尔 曲线 〈 省 略 第 一 个 
控制 点 ) 

Q xlylxy 绘制 二 次 贝 塞 尔 曲 线 到 点 (xy) 

和 xy 特殊 版 本 的 二 次 贝 塞 尔 曲 线 ( 省 略 控 制 点 ) 

吧 无 绘制 闭合 图 形 ， 如 果 d 属性 不 指定 z 命 了 ， 


则 绘制 线段 ， 而 不 是 封闭 图 形 
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因为 路 径 数 据 的 设置 非常 复杂 , 所 以 一 般 会 使 用 SVG 编辑 器 . 在 编辑 器 中 绘制 好 图 形 ， 
注意 然后 将 路 径 数据 复制 过 来 。 


7.3 画布 与 SVG 的 比较 


虽然 canvas 和 SVG 都 可 以 在 浏览 器 中 创建 图 形 ， 但 是 它们 却 有 着 本 质 上 的 差别 。 

SVG 是 基于 XML 的 图 形 语 言 ， 在 DOM 解析 中 其 每 个 元 素 都 是 可 用 的 ， 这 样 就 可 以 为 SVG 
元 素 附 加 JavaScript 事件 处 理 器 ， 实 现 更 丰富 的 效果 。 在 SVG 中 ， 每 个 被 绘制 的 图 形 均 被 视 为 对 
象 ， 如 果 SVG 对 象 的 属性 发 生变 化 ， 那 么 浏览 器 能 够 自动 重 现 图 形 。 

canvas 通过 JavaScript 来 绘制 二 维 图 形 ， 即 通过 对 像素 进行 逐个 演 染 完成 图 形 的 绘制 。 如 果 图 
形 已 经 被 浏览 器 演 染 完成 ， 那 么 对 它 的 任何 改变 都 需要 整个 场景 的 重新 绘制 才能 呈现 。 

下 表 列 出 了 canvas 与 SVG 的 比较 。 


canvas SVG 

依赖 分 辩 率 不 依赖 分 辨 率 

不 支持 事件 处 理 支持 事件 处 理 器 

弱 的 文本 泻 染 能 力 最 适合 带 有 大 型 泻 染 区 域 的 应 用 程序 (如 谷歌 地 图 
能 够 以 .png 或 jpg 格式 保存 结果 图 像 tt DOM 的 应 
适合 图 像 密集 型 的 游戏 ， 其 中 许多 对 象 会 被 频繁 重 绘 | 不 适合 游戏 应 用 


测试 题 

(1) SVG 使 用 什么 格式 定义 图 形 ? 

(2) 使 用 SVG 可 以 绘制 哪些 基本 图 形 ? 

(3) 如 何 复 用 SVG 图 形 ? 

(4) 绘制 SVG 渐变 图 形 时 ， 如 何 设置 渐变 的 颜色 ? 
(5) canvas 与 SVG 都 可 以 绘制 图 形 ， 它 们 有 什么 区 别 ? 


7.4 本 章 小 结 


本 章 通过 多 个 具体 的 案例 ， 详 细 介绍 了 HIML5 中 SVG 的 使 用 方法 。SVG 图 形 可 以 直接 嵌入 
在 HIML5 页 面 中 ， 也 可 以 用 记事 本 等 多 种 工具 进行 编辑 。SVG 除了 绘制 简单 的 基本 图 形 外 ， 还 
可 以 通过 SVG 编辑 器 绘制 复杂 的 图 形 。 在 HTML5 中 ， 虽 然 canvas 和 SVG 都 可 以 用 来 绘制 图 形 ， 
但 是 它们 却 各 有 优势 ， 在 实际 的 应 用 中 还 需要 区 别 对 待 。 


Forms API 


HTML 页 面 不 仅 可 以 向 用 户 展示 丰富 多 样 的 文字 、 图 片 、 音 /视频 等 内 容 ， 还 能 与 用 户 进行 交 
互 体验 ， 比 如 常见 的 用 户 信息 注册 ,在 这 个 过 程 中 ,所 有 收集 数据 的 工作 都 需要 form 表单 来 完成 。 
而 在 HTML5 中 ， 新 增 了 很 多 form 表单 的 类 型 和 属性 ， 为 HTML 页 面 收集 数据 提供 了 很 多 便利 。 


8.1 新 增 的 Input 输入 类 型 


form 表单 的 数据 有 很 多 种 类 型 ， 如 文本 、 数 字 、 邮 件 地 址 、 日 期 等 。 针 对 不 同 的 数据 类 型 ， 
HTML5 提供 了 多 种 input 输入 类 型 ， 本 节 将 详细 介绍 这 些 输入 类 型 的 使 用 方法 。 


8.1.1 email 类 型 


在 表单 提交 email 地 址 时 ,无 效 的 输入 会 生成 很 多 无 效 数据 ， 对 后 期 的 数据 检索 造成 一 定 的 影 
响 。 所 以 在 表单 提交 之 前 ， 需 要 对 输入 的 email 地 址 的 有 效 性 进行 验证 。 早 期 的 实现 方式 都 是 通过 
正则 表达 式 和 JavaScript 进 行 验证 ,而 在 HIML5 中 ,使 用 email 类 型 的 input 输 入 就 可 以 实现 对 email 
地 址 的 基本 验证 功能 。 使 用 email 类 型 的 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>8.1.1</title> 

</head> 

<body> 

<form action="#" method="get"> 

E-mail:<input type="email" name="myEmail"/><br /> 

<input type="submit" /> 
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</form> 
</body> 
</html> 


在 这 段 代码 中 ，form 表单 的 action 属性 设置 为 “#”， 表示 提交 到 当前 页 面 ，method 属性 设置 
提交 方式 为 get， 即 在 url 地 址 栏 中 显示 提交 的 数据 。 第 一 个 input 标签 的 type 类 型 设置 为 email， 
表示 该 输入 框 用 于 输入 email 地 址 ， 并 为 其 设置 name 属性 ; 第 二 个 input 标签 的 type 类 型 设置 为 
submit， 表 示 该 输入 框 用 于 提交 表单 数据 。 这 段 代码 在 Web 页 面 的 显示 效果 如 下 图 所 示 。 


所 CIDiocahovHMLSCSS36/611htiml 


E-mail: 


提交 | 


在 单 击 提交 按钮 时 ，email 类 型 的 input 输入 框 会 自动 对 输入 的 内 容 进行 email 有 效 性 验证 ， 如 
果 输 入 的 内 容 不 包含 @， 或 者 @ 前 面 或 后 面 没 有 其 他 内 容 ， 则 验证 不 通过 。email 验证 失败 的 效果 
如 下 图 所 示 。 


3 © |D localhost/HTMLSCSS3/6/6.1.1.html 


E-mail:lre 


| 四 请 在 电子 好 件 地 址 中 包 
插 '@"。"re’ 中 摧 少 "@"。 


CY email 类 型 的 input 输入 框 只 用 于 验证 基本 的 email 规则 ， 如 果 需 要 对 email 地 址 进行 更 
多 规则 的 验证 ， 可 以 给 email 标签 设置 id 属性 ， 然 后 在 JavaScript 中 通过 
document.getElementById("id") 获 取 email 标签 ， 再 对 其 内 容 进行 更 多 规则 的 验证 。 


8.1.2 url 类 型 


url 描述 了 互联 网 上 每 一 个 文件 的 地 址 ， 如 http://www.baidu.com，url 类 型 的 输入 框 则 是 用 来 
验证 用 户 输入 的 内 容 是 否 符 合 url 规则 的 控件 。 当 用 户 输入 的 内 容 不 符合 url 规则 ， 在 提交 表单 时 ， 
url 类 型 的 input 输入 框 就 会 给 出 错误 提示 。 其 示例 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>8.1.2</title> 

</head> 

<body> 

<form action="#" method="get"> 

RUL:<input type="url" name="myurl"/><br /> 

<input type="submit" /> 
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</form> 
</body> 
</html> 


错误 提示 效果 如 下 图 所 示 。 


HB WA 和 Rt. 


8.1.3 number 类 型 


数字 也 是 表单 中 经 常会 使 用 到 的 一 种 类 型 ， 如 果 提交 的 数据 并 非 数 字 类 型 ， 那 么 在 后 期 的 数 
据 处 理 过 程 中 有 可 能 会 出 现 数 据 转 换 错误 的 异常 。 而 number 类 型 的 input 输入 框 可 以 在 提交 数据 
时 对 数据 内 容 进 行 数字 有 效 性 验证 ， 保 证 了 数据 的 安全 有 效 。 使 用 number 类 型 的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>8.1.3</title> 

</head> 

<body> 

<form action="#" method="get"> 
Number:<input type="number" name="myNumber"/><br /> 
<input type="submit" /> 
</form> 

</body> 

</html> 


如 果 输 入 的 内 容 并 非 number 类 型 ， 那 么 输入 框 会 给 出 相应 的 错误 提示 ， 效 果 如 下 图 所 示 。 


8.1.4 range 类 型 


range 类 型 是 一 种 区 域 范 围 文本 ， 通 常 称 之 为 滑 块 ， 常 见 的 案例 有 调节 声音 、 调 节 RGB 颜色 
值 等 。 使 用 range 类 型 的 代码 如 下 : 
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<br 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 

<title>8.1.4</title> 

</head> 

<body> 

<form action="#" method="get"> 

<input type="range" min="0" max="100" step="1" value="0" name="myRange"/> 
Ve 

<input type="submit" /> 

</form> 

</body> 

</html> 


在 这 段 代码 中 ， 设 置 input 元 素 的 type 属性 为 range， 最 小 值 为 0， 最 大 值 为 100， 步 长 为 1， 


缺 省 值 为 0， 代 码 在 Web 页 面 的 效果 如 下 图 所 示 。 


8.1. 


5 date pickers 类 型 
普通 的 文本 输入 框 也 可 以 用 来 输入 日 期 和 时 间 ， 但 是 提交 后 的 数据 需要 进行 二 次 处 理 才能 


用 ,HTML5 提供 的 date pickers 类 型 选择 框 在 很 大 程度 上 简化 了 这 一 过 程 , 用户 可 以 直接 选择 日 期 、 
时 间 、 月 、 周 等 选项 。 例 如 下 面 的 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>8.1.5</title> 

</head> 

<body> 

<form action="#" method="get"><br /> 

Date:<input type="date" name="myDate"/><br /> 

month : <input type="month" name="myMonth"/><br /> 

week: <input type="week" name="myWeek"/><br /> 

time: <input type="time" name="myTime"/><br /> 

datetime: <input type="datetime" name="myDatetime"/><br /> 
datetime-local : <input type="datetime-local" name="myDatatimeLocal"/><br /> 
<input type="submit" /> 

</form> 
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</body> 
</html> 


这 段 代码 在 Web 页 面 上 的 效果 如 下 图 所 示 。 


© [Glocalhos/HTMLSCSS3/6/61.5 html 


Date:|2015/05/01 


week; 2015 年 第 18 周 

time: 14:00 

datetine; [2014.06.01T10.552 
datetine-local : | 2045/05/06 16:07 
EE 


8.1.6 search 类 型 


search 类 型 的 input 输入 框 用 于 页 面 的 搜索 功能 ， 可 以 是 站 内 搜索 ， 也 可 以 是 google 搜索 。 使 
用 search 类 型 的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>8.1.6</title> 

</head> 

<body> 

<form action="#" method="get"><br /> 
Search:<input type="search" name="mySearch"/><br /> 
<input type="submit" /> 

</form> 

</body> 

</html> 


这 段 代码 在 Web 页 面 上 的 效果 如 下 图 所 示 。 


© | D localhost/HTMLSCSS3/6/6.1.6 html 


Search: 
提交 | 


8.1.7 ”color 类 型 


color 类 型 用 于 打开 一 个 颜色 选择 面板 ， 可 以 在 该 面板 中 选择 合适 的 颜色 ,提交 表单 时 可 以 对 
选择 的 颜色 值 进行 提交 。 使 用 color 类 型 的 代码 如 下 : 
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<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 

<title>8.1.7</title> 

</head> 

<body> 

<form action="#" method="get"><br /> 
Color:<input type="color" name="myColor" /><br /> 
<input type="submit" /> 

</form> 

</body> 

</html> 


这 段 代码 在 Web 页 面 上 的 效果 如 下 图 所 示 。 


生生 C DiocahosuHm 


caor: 国 到 | 
E33 


8.2 新 增 的 表单 元 素 


在 HIML5 中 ， 除 了 以 上 介绍 的 新 增 input 输入 类 型 外 ,还 新 增 了 几 个 form 表单 元 素 ， 其 中 包 


8.2.1 datalist 元 素 


括 datalist 元 素 、keygen 元 素 及 output 元 素 。 下 面 我 们 就 来 看 一 下 这 些 新 增 的 表单 元 素 是 如 何 使 用 


datalist 元 素 用 于 将 一 组 值 设置 到 输入 控件 上 ， 当 输入 控件 获得 焦点 时 ， 控 件 会 以 列表 的 形式 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 


显示 这 组 数据 。 例 如 我 们 要 将 一 组 url 地 址 数据 设置 到 一 个 url 类 型 的 输入 控件 上 时 ， 可 以 使 用 以 
下 代码 : 
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<title>8.2.1</title> 

</head> 

<body> 

<input type="url" list="ur]l list" name="myUrl" /> 

<datalist id="url list"> 
<option label="Microsoft" value="http://www.microsoft.com" /> 
<option label="Google" value="http://www.google.com" /> 
<option label=" 百 度 " value="http://www.baidu.com" /> 

</datalist> 

</body> 

</html> 


在 这 段 代码 中 ， 我 们 为 url 类 型 的 input 控件 设置 了 一 个 list 属性 值 ， 并 将 该 值 赋予 datalist 元 
素 的 id 属性 ， 这 样 就 将 datalist 与 input 元 素 联系 在 了 一 起 。 在 datalist 元 素 中 ， 使 用 多 个 option 元 
素 显示 数据 ， 每 个 option 元 素 都 有 一 个 label 属性 和 value 属性 ，label 属性 用 于 设置 每 个 数据 要 显 
示 的 名 称 ， 而 value 属性 则 是 设置 每 个 数据 的 值 。 当 input 控件 获得 焦点 时 ， 将 以 下 拉 列 表 的 形式 
显示 这 些 数 据 ， 效 果 如 下 图 所 示 ， 选 择 其 中 某 一 项 ， 该 项 数据 的 value 就 会 显示 在 输入 框 中 。 


© | D localhost/HTML5CSS3/6/6.2.1.html 


hapy/wwwmicrosoftcom Moros 


如 果 某 一 个 option 元 素 的 value 属性 为 空 ， 那么 下 拉 列 表 中 将 不 显示 该 选项 。 


注意 
8.2.2 ”keygen 元 素 


使 用 keygen 元 素 可 以 生成 一 个 公 钥 和 私 钥 ， 私 钥 会 存放 在 用 户 本 地 ， 而 公 钥 则 会 发 送 到 服务 
器 ， 服 务 器 根据 公 钥 生成 一 个 客户 端 证 书 ， 然 后 返回 到 浏览 器 让 用 户 区 下 载 并 保存 到 本 地 。 这 样 ， 
用 户 在 需要 验证 的 时 候 ， 就 可 以 使 用 本 地 存储 的 私 钥 和 证 书 ， 通 过 TLS/SSL 安全 传输 协议 到 服务 
端 进行 验证 。 使 用 keygen 元 素 的 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>8.2.2</title> 

</head> 

<body> 

<form action="a.asp" method="get"> 

请 输入 : <input type="text" name="usr name" /> 
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加 密 : <keygen name="security" /> 
<input type="submit" /> 
</form> 

</body> 

</html> 


8.2.3 output 元 素 


从 字面 的 意思 理解 ，output 元 素 用 于 输出 内 容 ， 比 较 有 意思 的 是 ， 这 些 输出 的 内 容 并 非 直接 来 
自 输入 ， 而 是 通过 其 他 元 素 触发 而 来 。 当 真正 的 输入 控件 获得 输入 内 容 后 ， 可 以 对 这 些 内 容 进行 加 
工 处 理 ， 然 后 由 output 元 素 输出 显示 。 使 用 output 元 素 的 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>8.2.3</title> 
</head> 
<body> 
<form oninput="myOutput .value+=txt .value.length%4"> 
<input type="text" id="txt" > 
<br /> 
<output name="myOutput" for="txt"></output> 
</form> 
</body> 
</html> 


在 这 段 代码 中 有 一 个 文本 框 ， 用 于 输入 内 容 ， 并 设置 该 文本 框 的 id 属性 为 txt。output 元 素 用 
于 输出 结果 ， 设 置 其 name 属性 为 myOutput，for 属性 用 于 设置 output 元 素 的 id。 在 form 表单 中 ， 
设置 oninput 属性 为 output 元 素 的 输出 值 ， 这 里 设置 的 是 连续 输出 输入 文本 长 度 对 4 的 余数 。 这 段 
代码 在 Web 页 面 上 的 效果 如 下 图 所 示 。 


回 sz 


€ 3 © Dlocalhost/HTMLSCSS3/6/6.23html 


[asdasfad | 
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8.3 新 增 的 form 属性 


HIML5 新 增 了 两 个 form 属性 ， 分 别 为 autocomplete 和 novalidate。 本 节 将 详细 介绍 这 两 个 属 
性 的 使 用 方法 。 
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8.3.1 autocomplete 属性 


autocomplete 属性 用 于 控制 自动 完成 功能 的 开启 与 关闭 。 该 属性 可 设置 表单 或 input 元 素 ， 它 
有 两 个 属性 值 ， 当 设置 为 on 时 ， 启 用 该 功能 ， 当 设置 为 off 时 ， 关 闭 该 功能 。 启 用 该 功能 后 ， 当 
用 户 在 自动 完成 域 开 始 输入 时 ， 浏 览 器 就 会 在 该 域 中 显示 填写 的 选项 。 用 户 每 提交 一 次 ， 就 会 增加 
一 个 可 用 选择 的 选项 。 使 用 autocomplete 属性 的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>8.3.1</title> 

</head> 

<body> 

<form action="#" method="get" autocomplete="on"> 
请 输入 : <input type="text" name="txt" /> <br /> 
<input type="submit" /> 

</form> 

</body> 

</html> 


这 段 代码 在 Web 页 面 中 的 显示 效果 如 下 图 所 示 。 


8.3.2 novalidate 属性 


我 们 在 前 面 介绍 了 很 多 input 输入 类 型 ， 当 提交 表单 时 ， 会 对 这 些 输入 内 容 进 行 验证 ， 而 
novalidate 属性 则 用 于 在 提交 表单 时 不 对 form 或 input 进行 验证 。 使 用 novalidate 属性 的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>8.322</titie> 

</head> 

<body> 

<form action="#" method="get" novalidate> 
E-mail: 
<input type="email" name="myEmail" /> 
<input type="submit" /> 
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</form> 
</body> 
</html> 


在 这 段 代码 中 ， 设 置 了 form 表单 的 novalidate 属性 ， 虽 然 使 用 了 email 类 型 的 input 元 素 , 但 
是 无 论 在 Web 页 面 输入 什么 内 容 ， 提 交 操作 都 能 顺利 完成 。 


8.4 新 增 的 input 属性 


HTMLS5 不 仅 新 增 了 很 多 input 输入 类 型 ， 还 新 增 了 很 多 input 属性 ， 这 些 新 增 的 属性 为 mput 
元 素 提 供 了 很 多 扩展 和 应 用 。 本 节 我 们 就 逐一 介绍 这 些 属 性 的 使 用 方法 。 


8.4.1 autocomplete 属性 


input 元 素 的 autocomplete 属性 与 form 表单 的 autocomplete 属性 的 功能 相同 ， 都 是 用 于 控制 自 
动 完成 功能 的 开启 与 关闭 ， 这 里 就 不 再 袭 述 ， 可 参见 8.3.1 节 内 容 。 


8.4.2 autofocus 属性 


autofocus 属性 用 于 自动 获得 焦点 。 在 HTMLS5 中 为 input 元 素 设置 该 属性 后 ， 当 页 面 加载 时 ， 
input 元 素 会 自动 获得 光标 焦点 。 例 如 绝 大 多 数 人 访问 百度 首页 就 是 为 了 搜索 ， 所 以 百度 首页 加 载 
后 ， 光 标 会 自动 落 到 搜索 框 中 ， 这 与 autofocus 的 效果 是 一 样 的 。 使 用 autofocus 属性 的 代码 如 下 : 


<input type="text" name="myTxt" autofocus /> 
8.4.3 form 属性 


form 属性 用 于 设置 mput 元 素 属于 哪个 表单 。 在 HIML4 中 , form 表单 中 的 所 有 元 素 都 必须 在 
这 个 表单 的 开始 标签 和 结束 标签 之 间 ， 而 在 HIML5 中 ， 如 果 要 将 form 表单 开始 和 结束 标签 之 外 
的 元 素 归 属 到 该 表单 ， 只 需要 为 该 元 素 设置 form 属性 即 可 。 例 如 下 面 这 段 代码 : 
<form action="#" method="get" id="myForm"> 
常住 地 址 : <input type="text" name="ftxt" /> 
<input type="submit" /> 
</form> 
临时 地 址 :<input type="text" name="]txt" form="myForm" /> 


在 设置 form 属性 时 ， 需 要 知道 form 表单 的 id 属性 值 ， 并 将 form 属性 的 值 也 设置 成 表单 id 
的 属性 值 。 


8.4.4 form overrides 属性 


form overrides 属性 用 于 重 写 表单 元 素 的 某 些 属性 ， 比 如 相同 的 Web 页 面 ， 张 三 提交 请 求 后 数 
据 到 达 a 页 面 ， 而 李 四 提交 请 求 后 数据 则 会 达到 b 页 面 。 在 HTMLS5 的 表单 属性 有 
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formaction、formenctype、formmethod、formnovalidate 和 formtarget， 分 别 用 于 重 写 表单 的 action、 
enctype、method、novalidate 和 target 属性 。 例 如 下 面 这 段 代 码 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>8.4.1</title> 
</head> 
<form action="a.jsp" method="get"> 
用 户 名 : <input type="text" name="fname" /><br /> 
<input type="submit" value=" 张 三 的 提交 按钮 "/><br /> 
<input type="submit"” formaction="b.jsp”value=" 李 四 的 提交 按钮 ”/> 
</form> 
</body> 
</html> 


第 一 个 input 元 素 会 将 输入 的 数据 提交 至 ajsp 页 面 ， 而 第 二 个 input 元 素 设置 了 formaction 属 
性 ， 重 写 了 action 属性 ， 提 交 到 bjsp 页 面 ， 当 李 四 单 击 提交 按钮 后 ， 数 据 就 会 提交 到 bjsp 页 面 。 


C7 表单 重新 属性 仅 适用 于 类 型 为 submit 和 image 的 input 元 素 。 
注 意 


8.4.5 ”height 和 width 属性 


在 HIML5 中 有 一 个 image 类 型 的 input 元素,height 属性 和 width 属性 就 是 为 这 个 元 素 设计 的 ， 
用 于 设置 图 片 的 高 度 和 宽度 。height 属性 和 width 属性 以 像素 为 单位 。 使 用 代码 如 下 : 


<input type="image" src="imgtemp.gif" width="35" height="35" /> 
8.4.6 list 属性 


list 属性 用 于 设置 输入 域 的 datalist 元 素 , 我 们 在 介绍 datalist 元 素 时 曾 使 用 过 这 个 属性 ,为 list 
属性 设置 datalist 的 id 属性 值 , 可 以 将 datalist 元 素 与 input 元 素 相 关联 , 这 样 就 可 以 将 datalist 以 列 
表 的 形式 展现 给 input 元 素 。 该 属性 的 使 用 方法 详 见 8.2.1 节 。 


list 属性 适用 于 以 下 类 型 的 input 元 素 : text、 search、 url、 telephone、 email、 date 
注意 pickers、 number、 range 和 color。 


8.4.7 min、max 和 step 属性 


min、max 和 step 属性 用 于 为 包含 数字 或 日 期 的 input 元 素 设置 最 小 值 、 最 大 值 和 步 长 。 这 几 
个 属性 适用 于 data pickers、number 和 range 类 型 的 input 元 素 。 例 如 下 面 这 段 代 码 : 


<input type="range" min="0" max="100" step="1”name="myRange" /> 
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设置 range 类 型 的 mput 元 素 ， 最 小 值 为 0， 最 大 值 为 100， 步 长 为 1， 这样 每 移动 一 次 , range 
就 移动 1， 最 小 移动 到 0， 最 大 移动 到 100。 


8.4.8 multiple 属性 


mnultiple 属性 用 于 设置 mput 元 素 是 否 可 以 有 多 个 值 .该 属性 只 适用 于 email 和 file 类 型 的 input 
元 素 。 如果 给 email 类 型 的 input 元 素 设置 multiple 属性 , 那么 在 输入 框 中 可 以 输入 多 个 email 地 址 ， 
多 个 email 地 址 之 间 用 逗号 隔 开 。 如 果 给 file 类 型 的 input 元 素 设置 multiple 属性 , 那么 在 打开 的 选 
择 文件 对 话 框 中 就 可 以 选择 多 个 文件 。 使 用 这 两 个 属性 的 代码 如 下 : 

E-mail:<input type="email" name="myEmail" multiple/><br /> 

File:<input type="file" name="myFile" multiple /><br /> 


8.4.9 ”pattern 属性 


pattem 属性 用 于 设置 验证 input 元 素 的 方式 为 正则 表达 式 。 正 则 表达 式 由 一 系列 字符 和 数字 组 
成 ， 用 于 匹配 某 个 句法 规则 。 该 属性 适用 于 text、search、url、telephone、email 和 password 类 型 
的 input 元 素 。 例 如 我 们 需要 一 个 6~16 位 长 ， 以 字母 开头 的 用 户 名 ， 就 可 以 为 input 元 素 设置 以 下 
规则 的 正则 表达 式 。 


<input type="text" name="myName" pattern="[a-zA-Z]\w{5,15}$" /> 
8.4.10 ”placeholder 属性 


placeholder 属性 用 于 设置 input 元 素 在 内 容 为 空 时 的 提示 信息 。 例 如 在 Web 页 面 中 有 一 个 文本 
输入 框 ， 但 是 并 不 知道 应 该 输入 什么 内 容 ， 这 时 就 可 以 给 该 文本 框 设 置 placeholder 属性 ， 提 示 用 
户 应 该 输入 哪些 有 效 信 息 。 当 文本 框 获得 焦点 ， 用 户 开始 输入 内 容 时 ， 提 示 的 内 容 就 会 消失 。 该 属 
性 可 用 于 text、search、url、telephone、email 和 password 类 型 的 input 元素 。 使 用 Placeholder 属性 
的 代码 如 下 : 

<input type="text"”name="myRaddress" placeholder=" 请 输入 您 的 常住 地 址 ! "” /> 


8.4.11 required 属性 


required 属性 用 于 设置 input 元素 是 否 可 以 提交 空 数据 。 如 果 给 input 元 素 设置 了 该 属性 ， 那 么 
在 提交 表单 时 浏览 器 会 提示 用 户 该 字段 必须 填写 内 容 ， 否 则 提交 通过 。required 属性 可 用 于 text、 
search、url、telephone、email、passw、date pickers、number、checkbox、raido 和 file 类 型 的 input 
元 素 。 使 用 required 属性 的 代码 如 下 : 


<input type="text" name="myName" required /> 
测试 题 
(1) 在 HIML5 中 ，input 元 素 根据 类 型 的 不 同 可 以 有 哪些 用 途 ? 


(2) 在 使 用 range 类 型 的 input 元 素 时 ， 能 否 设置 step 为 负数 ? 
(3) datalist 元 素 与 input 元 素 通过 哪个 属性 相关 联 ? 
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(4) autocomplete 的 属性 值 有 哪些 ? 
(5) 如 何在 Web 页 面 的 文本 框 中 设置 输入 提示 信息 ? 


8.5 本 章 小 结 


本 章 主 要 介绍 了 HIML5 中 新 增 的 各 种 input 元 素 和 属性 ， 以 及 新 增 的 form 表单 元 素 和 属性 。 
通过 本 章 的 学 习 ， 应 该 熟练 掌握 email、url、number、range、date pickers、search 和 color 等 类 型 的 
input 元 素 使 用 方法 ， 并 能 灵活 运用 各 种 input 属性 满足 Web 页 面 设 计 需 求 ， 同 时 也 要 熟练 掌握 
datalist 元 素 、keygen 元 素 和 output 元 素 的 使 用 方法 ， 以 及 autocomplete 属性 和 novalidate 属性 的 使 
用 方法 。 


File API 


在 HTMLS5 之 前 对 文件 的 操作 都 是 通过 flash、silverlight 或 第 三 方 的 activeX 插件 等 技术 ， 由 
于 这 些 技 术 很 难 实现 跨 平 台 、 跨 浏览 器 和 跨 设备 操作 ， 因 此 HIML5 中 就 提供 了 操作 文件 的 API， 
让 这 一 切 变 得 更 简单 、 更 标准 。 本 章 主要 介绍 HTML5 中 有 关 文 件 操作 的 API。 


9.1 Blob 对 和 象 


在 SqlServer 中 ，Blob 类 型 可 以 存放 二 进 制 数据 ， 而 在 HTML5 中 ，Blob 对 象 不 仅 可 以 存放 二 
进 制 数据 ， 还 可 以 设置 这 个 数据 的 mine 类 型 ， 也 就 是 说 ，HTML5 中 的 Blob 对 象 是 用 于 存储 二 进 
制 文件 对 象 的 基础 。 

在 低 版 本 的 浏览 器 中 ， Blob 对 象 需要 BlobBuilder 之 类 的 方式 来 创建 ， 或 者 使 用 mozSlice、 
webkitSlice 方法 来 分 割 出 新 的 Blob 对 象 ， 而 现在 可 以 直接 使 用 Blob 构造 器 来 创建 Blob 对 象 。 创 
建 方法 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>9. TT</title> 

<script> 

var data='<h3>blob 对 象 </h3>"'; 

Var blob=new Blob([datal],{"type":"text/html"}); 

onload=function(){ 

var iframe=document.createElement ("iframe"); 
iframe.src=URL.createObjectURL (blob); 
document .body.appendChild (iframe); 
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bi 
</script> 
</head> 
<body> 
</body> 
</html> 


在 这 段 代码 中 ，Blob 对 象 的 构造 中 有 两 个 参数 ， 第 一 个 是 参数 是 数组 ， 用 于 组 装 Blob 对 象 ; 
第 二 个 参数 是 其 配置 属性 ， 本 例 中 配置 了 其 type 属性 为 texthtml。 当 页 面 加 载 时 ， 创 建 一 个 这 ame 
对 象 ， 并 使 用 该 对 象 的 url 来 访问 它 。 这 段 代码 的 效果 如 下 图 所 示 。 


国 bee 
€ 3 © localhostblobhtml 


Blob 对 象 


9.2 File 对 象 与 Filelist 对 象 


当 为 input 元 素 的 type 类 型 设置 为 fle 对 象 时 , Web 页 面 上 会 显示 一 个 选择 文件 按钮 和 一 个 文 
本 显示 框 ， 单 击 选择 文件 按钮 可 以 选择 一 个 文件 ， 文 本 显示 框 中 会 显示 选中 的 文件 名 称 。 如 果 为 
input 元 素 设置 multiple 属性 ， 就 可 以 选择 多 个 文件 ， 文 本 显示 框 中 会 显示 选中 了 几 个 文件 ， 效 果 
如 下 图 所 示 。 


fiieiet x 
人 3 © [GD localhost/fle filelist htm 
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在 这 个 过 程 中 ， 用 户 选 中 的 每 一 个 对 象 都 是 一 个 file 对 象 ， 用 户 选中 的 多 个 对 象 的 集合 就 是 
filelist 对 象 。file 对 象 有 两 个 属性 : name 属性 表示 文件 名 ， 但 不 包含 文件 路 径 ， lastModifiedDate 
属性 表示 文件 的 最 后 修改 日 期 。 使 用 fle 对 象 和 filelist 对 象 实现 上 传 功能 界面 的 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>9.2.1 </title> 


<script language="javascript"> 
function show() 
{ 
var file,filelist,mySpan; 
file=document .getElementById ("file"); 
filelist=file.files; 
mySpan=document .getElementById ("mySpan"); 
Var names=""; 
for (var i=0;i<filelist.length;i++) 
| 
names+=filelist[i]l.name+"<br />"7 
} 
mySpan.innerHTML=names; 
} 
</script> 
</head> 
<body> 
<input type="file" id="file" multiple /> 
<input type="button" onClick="show();"” value=" 上 传 文件 ”/> 
<br /> 
<span id="mySpan"></span> 
</body> 
</html> 


9.3 FileReader 对 象 


FileReader 对 象 用 于 读 取 文件 中 的 数据 ， 并 将 这 些 数 据 读 入 内 存 。 根 据 文件 的 类 型 ， 可 以 选择 
不 同 的 方法 读 取 文件 ， 并 在 异步 读 取 文件 的 过 程 中 触发 多 个 事件 。 


9.3.1 FileReader 对 象 的 方法 


HTML5 中 的 FileReader 对 象 一 共有 4 个 方法 : readAsBinaryString 以 二 进 制 方式 读 取 文件 ; 
TeadAsText 以 文本 方式 读 取 文件 ，readAsDataURL 以 DataURL 方式 读 取 文 件 ，abort 方法 并 非 用 于 
读 取 文件 ， 而 是 中 断 读 取 操 作 。EFileReader 对 象 有 一 个 result 属性 ， 用 于 存储 读 取 文 件 的 结果 。 
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9.3.2 ”FileReader 对 象 的 事件 


FileReader 对 象 在 异步 读 取 文件 时 会 触发 很 多 事件 ， 根 据 不 同 的 事件 处 理 不 同 的 操作 ， 可 以 使 
程序 更 加 和 人 性 和 健壮 。 例 如 当 读 取 数据 中 断 时 触发 onabort 事件 ， 当 读 取 数据 出 错时 触发 onerror 


9.3.3 实例 : 以 二 进 制 方式 读 取 文件 


事件 ， 当 读 取 数 据 开始 时 触发 onloadstart 事件 ， 当 读 取 数据 过 程 中 触发 onprogress 事件 ， 当 数据 读 
取 成 功 时 触发 onload 事件 ， 当 数据 读 取 完 成 时 触发 onloadend 事件 。 


本 实例 中 ， 我 们 将 以 二 进 制 方式 读 取 一 个 文件 ， 并 在 Web 页 面 中 显示 读 取 到 的 内 容 。 实 例 代 


码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>9.3.1</title> 

<script language="javascript"> 
// 以 二 进 制 方式 读 入 文件 

function fileBinary() 


{ 


Var myDiv=document .getElementById ("myDiv"); 


// 判 断 浏览 器 是 否 支持 FileReader 
if(typeof FileReader=="undefined") 
{ 


myDiv.innerHTML="<h2> 您 的 浏览 器 不 支持 FileReader! </h2>"; 


return false; 


} 


var file=document .getElementById("file") .files[0]; 


Var reader=new FileReader(); 
// 以 二 进 制 方式 读 入 文件 
reader.readAsBinarystring (file); 
reader.onload =function(e) 
{ 
myDiv.innerHTML=this.result; 

} 

} 

</script> 

</head> 

<body> 

<input type="file" id="file" /> 


<input type="button"” onClick="fileBinary();”value=" 二 进 制 读 取 文 件 ”/> 


<div id="myDiv" name="myDiv"></div> 
</body> 
</html> 
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以 二 进 制 读 取 文件 的 效果 如 下 图 所 示 。 
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9.3.4 实例 : 以 文本 方式 读 取 文件 


本 实例 中 ， 我 们 将 以 文本 方式 读 取 一 个 文件 ， 并 在 Web 页 面 中 显示 读 取 到 的 内 容 。 实 例 代 码 
如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>9.3.2</title> 
<script language="javascript"> 
// 以 文本 方式 读 取 文件 
function fileText() 
{ 
Var myDiv=document .getElementById ("myDiv" 


// 判 断 浏览 器 是 否 支持 FileReader 


if(typeof FileReader=="undefined") 

{ 
myDiv .innerHTML="<h2> 您 的 浏览 器 不 支持 FileReader! </h2>"; 
return false; 

} 


var file=document .getElementById ("file").files[0]; 
Var reader=new FileReader(); 
// 以 文本 方式 读 取 文件 
reader.readAsText (file); 
reader .onload=function (e) 
{ 


myDiv.innerHTML=this.result; 


a 
</script> 
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</head> 
<body> 


9.3. 


<input type="file" id="file" /> 

<input type="button"” onClick="fileText();”value=" 文 本 读 取 文 件 ”/> 
<div id="myDiv" name="myDiv"></div> 

</body> 

</html> 


以 文本 方式 读 取 文件 的 效果 如 下 图 所 示 。 
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5 实例 : 以 DataURL 方式 读 取 文件 
本 实例 中 ， 我 们 将 以 DataUR1 方式 读 取 一 个 文件 ， 并 在 Web 页 面 中 显示 读 取 到 的 内 容 。 实 例 


代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>9.3.3</title> 
<script language="javascript"> 
// 以 DataURL 方式 读 取 文件 
function fileDataURL() 
{ 
Var myDiv=document .getElementById ("myDiv"); 
// 判 断 浏览 器 是 否 支持 FileReader 


if(typeof FileReader=="undefined") 


myDiv .innerHTML="<h2> 您 的 浏览 器 不 支持 FileReader! </h2>"; 
return false; 

} 

var file=document .getElementById("file") .files[0]; 


// 判 断 文件 类 型 
if(!/image\/\w+/.test (file.type)) 
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myDiv.innerHTML="<h2> 请 选择 图 像 文件 ! </h2>"; 
return false; 
} 
Var reader=new FileReader(); 
// 以 DataURL 方式 读 取 文 件 
reader.readAsDataURL (file); 
reader .onload=function (e) 
{ 
myDiv.innerHTML="<img src="'"+this.result+"' />"; 
} 
} 
</script> 
</head> 
<body> 
<input type="file" id="file" /> 
<input type="button" onClick="fileDataURL();"” value="DataURL 读 取 文件 ”/> 
<div id="myDiv" name="myDiv"></div> 
</body> 
</html> 


以 DataURL 方式 读 取 文件 的 效果 如 下 图 所 示 。 


9.4 FileSystem 对 象 


由 于 互联 网 技术 的 发 展 ， 越 来 越 多 的 应 用 迁移 到 了 Web 端 ， 用 于 只 需要 一 个 浏览 器 就 可 以 实 
现 更 多 的 功能 ， 而 不 需要 安装 其 他 应 用 或 插件 。 但 是 出 于 安全 考虑 ， 浏 览 器 自身 的 安全 沙 箱 机 制 ， 
会 限制 浏览 器 脚本 去 操作 本 地 文件 系统 。FileSystem 对 象 的 出 现 改变 了 这 一 状况 ， 使 用 
FileSystemAPI， 我 们 的 Web 应 用 程序 就 可 以 阅读 、 浏 览 、 编 辑 和 操作 本 地 文件 系统 。 
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9.4.1 FileSystem 对 象 简介 


目前 只 有 Google 的 Chrome 可 以 完整 地 支持 Filesystem API。FileSystem API 的 主要 功能 有 以 
下 三 个 方面 。 

e@ 读 取 和 处 理 文件 : File/Blob、FileList、FileReader. 

e 创建 和 写 入 : BlobBuilder、FileWriter。 

e@ 目录 和 文件 系统 访问 : DirectoryReader、FileEntry/DirectoryEntry、LocalFileSystem 。 


9.4.2 ”请求 文件 系统 


基于 安全 原因 ，Web 应 用 通过 浏览 器 的 脚本 去 操作 本 地 文件 ， 首 先 需要 获取 操作 许可 ， 否 则 
通过 浏览 器 就 可 以 随意 修改 本 地 文件 的 做 法 是 非常 可 怕 的 。 通 过 调用 window.requestFileSystem() 
方法 可 以 请 求 对 沙 盒 文件 系统 的 访问 权限 。 

window.requestFileSystem = window.requestFileSystem || 
window.webkitRequestFileSystem; 


window.requestFileSystem(type, size, successCallback, opt errorCallback) 

Window.requestFileSystem() 方 法 需要 4 个 参数 ， 各 参数 的 含义 如 下 。 

@ type: 文件 存储 是 否 应 该 持久 。 如 果 设置 为 window.TEMPORARY， 当 浏览 器 需要 更 多 空间 
时 可 自行 决定 是 否 删除 该 文件 ; 如 果 设置 为 windowPERSISTENT, 就 需要 获得 用 户 或 应 用 的 
明 授 权 才 可 以 删除 。 

@ size: 指定 请 求 文件 的 大 小 ， 以 字 节 为 单位 。 

日 successCallback: 当 文件 系统 请 求 成 功 后 的 回调 函数 ， 参 数 为 FileSystem 对 象 。 

@ ”errorCallback: 当 文 件 系统 请 求 失败 或 错误 时 的 回调 函数 ， 参 数 为 FileError 对 象 。 


当 首 次 调用 window :requestFileSystemO 对 象 时 ， 系 统 会 为 应 用 创建 一 个 沙 箱 文件 ， 并 为 
注意 其 指定 一 个 名 称 。 


【实例 】 创 建 一 个 大 小 为 SMB 的 临时 文件 并 显示 文件 名 称 。 代 码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>9.4.1</title> 
<script language="javascript"> 
window.requestFileSystem = window.requestFileSystem || 
window.webkitRequestFileSystem; 
window.requestFileSystem(window.TEMPORARY, 5*1024*1024, onInitFs, 
errorHandler); 
function onInitFs (fs){ 
alert ("文件 创建 完成 ， 文 件 名 为 :"+fs .name); 
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function errorHandler (err){ 
Var msg = "Rn error occured: '; 
switch (err.code) { 
Case FileError.NOT FOUND ERR: 
msg += "File or directory not found'; 
break; 
Case FileError.NOT READABLE ERR: 
msg += "File or directory not readable'; 
break; 
Case FileError.PATH EXISTS ERR: 
msg += "File or directory already exists'; 
break; 
Case FileError.TYPE MISMATCH ERR: 
msg += "Invalid filetype'; 
break; 
default: 
msg += "Unknown Error'; 
break; 
}; 
console.1og (msg); 
}; 
</script> 
</head> 
<body> 
</body> 
</html> 


执行 这 段 代 码 后 ， 浏 览 器 弹出 框 中 会 显示 创建 的 文件 名 称 ， 效 果 如 下 图 所 示 。 


localhost 上 区 网 局 示 
Sears Xamhte locshest 9Tempera 


(7 这 段 代 码 中 的 错误 处 理 机 制 适用 于 本 章 其 他 案例 异步 调用 引发 的 错误 。 


提 示 
如 果 要 请 求 创建 一 个 永久 存储 的 文件 ,就 需要 使 用 window.webkitStorageInfo 的 API 请 求 存储 ， 
此 时 浏览 器 会 征询 用 户 意见 ， 若 用 户 同意 存储 ， 则 请 求 文件 成 功 ， 否 则 失败 。 
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window.webkitStorageInfo.requestQuota (PERSISTENT, 1024*1024, 
function(grantedBytes) { 
window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, 
errorHandler); 


}, errorHandler); 


9.4.3 创建 文件 


请 求 文件 系统 成 功 后， 系统 会 返回 一 个 FileSystem 对 象 ， 我 们 可 以 在 回调 函数 onInitFS 中 调 
用 方法 fs.root.getFile0 为 创建 的 文件 命名 。 我 们 先 来 看 一 个 回调 函数 : 


window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, 
errorHandler); 
function onInitFs (fs) { 
fs.root.getFile('log.txt', {create: true, exclusive: true}, 
function(fileEntry) { 
console.1og(' 文 件 创建 成 功 ! '); 
console.log('fileEntry.isFile='+fileEntry.isFile); 
console.log('fileEntry.name="'+fileEntry.name); 
console.log('fileEntry.fullPath='+fileEntry.fullPath); 
}, errorHandler); 


} 


在 这 段 代 码 中 ，fs.root.getFile0 方 法 有 三 个 参数 ， 第 一 个 参数 指定 文件 的 名 称 ， 第 二 个 参数 
“create:true ”表示 当 文 件 不 存在 时 创建 文件 ， 若 为 false， 则 仅 获取 并 返回 文件 ，“txclusive:true” 
表示 当 文件 存在 时 引发 错误 ， 第 三 个 参数 是 执行 成 功 后 的 回调 函数 ， 同 时 返回 FileEntry 对 象 。 
FileEntry 对 象 包含 标准 文件 系统 中 的 属性 和 方法 ， 详 见 下 表 。 


属性 /方法 功 能 
isFile 是 否 为 文件 
isDirectory 是 否 为 目录 
name 文件 名 称 
fullPath 文件 路 径 


getMetadata(successCallback. opt_errorCallback) 获取 文件 数据 


remove(successCallback. opt_errorCallback) 删除 文件 


moveTo(dirEntry. opt_newName. opt_successCallback. opt_errorCallback) | 移动 文件 


copyTo(dirEntry. opt_newName. opt_successCallback opt_errorCallback) | 复制 文件 


getParent(successCallback opt_errorCallback) 获取 文件 父 级 


toURL(opt_ mimeType) 将 文件 转换 成 URL 


file(successCallback. opt_errorCallback) 读 取 文件 


createWriter(successCallback. opt_errorCallback) 创建 一 个 FileWiiter 对 象 用 于 写 入 文件 


此 回调 函数 执行 后 的 效果 如 下 图 所 示 。 
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Ga 


[7 FileSystem 对 象 创建 的 文件 和 目录 需要 通过 浏览 器 才能 查看 。 打开 浏览 器 ， 在 地 址 栏 中 
输入 “filesystem:http://localhost/temporary/” 即 可 查看 创建 的 临时 文件 ， 如 果 将 


提 示 
“temporary” 换 成 persistent， 可 查询 永久 存储 文件 ， 效 果 如 下 图 所 示 。 
的 索引 
名 称 大 小 凑 改 日 期 
logtxzt 5B 15/2/14 下 午 3:05:23 
9.4.4 写 入 文件 


文件 创建 成 功 后 ， 就 可 以 开始 写 入 文件 了 。FileEntry 对 象 的 createWriter0 方 法 用 于 创建 一 个 
FileWriter 对 象 ， 使 用 该 对 象 的 write0 方 法 即 可 将 数据 写 入 到 文件 中 。 相 关 代 码 如 下 : 


function onInitFs(fs) { 
fs.root.getFile('log.txt', {create: true}, function (fileEntry) { 
console.1og (' 文 件 创建 成 功 ! '); 
fileEntry.createWriter (function (fileWriter) { 
fileWriter.onwriteend = function(e) { 
console.10g(' 文 件 写 入 成 功 ! '); 
}; 
fileWriter.onerror = function(e) { 
console.1log(' 文 件 写 入 失败 : ' + e.tostring()); 
}; 


var data='This is a test!'; 
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Var bb = new Blobl([datal], {"type":"text/html"}); 
fileWriter.write (bb); 
}, errorHandler); 
}, errorHandler); 


} 
在 这 段 代码 中 , 我 们 创建 了 一 个 Blob 对 象 的 文字 对 象 ， 并 将 Blob 对 象 传递 给 write0 方 法 ， 当 
写 入 成 功 后 输出 成 功 信息 ， 当 写 入 失败 后 输出 失败 信息 。 在 浏览 器 地 址 栏 中 输入 
“filesystem:http://localhost/temporary/” 并 打开 创建 的 文件 ， 就 可 以 看 到 我 们 写 入 的 内 容 了 ， 效 果 


如 下 图 所 示 。 


[9 flesystemihttpylocalhe x 


€ © QD filesystem:http://localhost/temporary/log.txt 


This is a test! 


9.4.5 ”向 文件 中 附加 数据 
能 和 否 给 文件 追加 内 容 呢 ? 答案 是 肯定 的 。 


既然 可 以 创建 文件 ， 也 可 以 给 文件 写 入 内 容 ， 那 么 能 否 给 
首先 需要 设置 getFile0 方 法 的 create 为 false， 当 文件 存在 时 ， 仅 返回 文件 即 可 ， 其 次 还 需要 设置 
FileWriter 对 象 追加 数据 的 位 置 ， 我 们 这 里 取 文件 数据 长 度 。 相 关 代码 如 下 : 


function onInitFs (fs) { 
fs.root.getFile('log.txt', {create: false}, 


console.1og(' 文 件 创建 成 功 ! ') 7 
fileEntry.createWriter (function (fileWriter) { 
fileWriter.onwriteend = function(e) { 
console.1og(' 文 件 写 入 成 功 ! ') 7 
] 7 
fileWriter.onerror = function(e) { 
console.1og(' 文 件 写 入 失败 : ' + e.toString()) 7 


function (fileEntry) { 


] 7 
fileWriter.seek (fileWriter.length); 
var data='This is append content!'; 
Var bb = new Blobl([data],{"type":"text/html"}); 
fileWriter.write (bb) 7 
}, errorHandler); 
}, errorHandler); 


} 
执行 这 段 代 码 后 ， 可 以 在 浏览 器 中 打开 追加 数据 的 文件 ， 效 果 如 下 图 所 示 。 


[D) flesystemihttpy//localhe x 


二 © BD filesystem:http://localhost/temporary/log.txt 


This is a test! This is append content! 
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9.4.6 ”复制 选中 的 文件 


除了 以 上 介绍 的 在 文件 中 直接 写 入 数据 外 ， 我 们 还 可 以 通过 file 类 型 的 input 元 素 加 载 多 个 文 
件 ， 并 将 这 些 文件 复制 为 临时 存储 文件 。 相 关 代码 如 下 : 
<input type="file" id="myfile" onChange="copyFile()" multiple /> 
window.requestFileSystem = window.requestFileSystem || 
window.webkitRequestFileSystem; 
function copyFile() 
{ 
Var files = document .getElementById("myfile") .files; 
window.requestFileSystem (window.TEMPORARY, 1024*1024, function(fs) { 
for (var i = 0, file; file = files[i]; ++i) { 
(function(f) { 
fs.root.getFile(file.name, {create: true, exclusive: true}, 
function(fileEntry) { 
fileEntry.createWriter (function (fileWriter) { 
fileWriter.write(f); 
}, errorHandler); 
}, errorHandler); 
1) (file); 
} 
}, errorHandler); 


在 这 段 代码 中 , 首先 为 input 元 素 的 onChange 事件 添加 一 个 函数 copyFile, 该 函数 的 主要 功能 
就 是 获取 input 元 素 选中 的 文件 ， 由 于 这 些 文件 都 是 File 对 象 ， 而 File 对 象 又 继承 自 Blob 对 象 ， 
因此 通过 循环 遍历 这 些 文件 ， 在 循环 的 过 程 中 ， 通 过 FileWriter 的 write 方法 将 其 复制 为 临时 存储 
的 文件 。 


9.4.7 ”删除 文件 


我 们 知道 window.TEMPORARY 类 型 的 文件 可 以 根据 浏览 器 的 需要 自行 删除 ， 而 
window.PERSISTENT 类 型 的 文件 则 需要 手动 删除 。 使 用 FileEntry 对 象 的 remove 方法 可 直接 删除 
指定 的 文件 。 注意 ， 为 了 避免 打开 文件 报错 ， 需 要 设置 getFile0 方 法 的 create 为 false， 删 除 文件 的 
代码 如 下 : 

function deleteFile(fs) 

{ 

fs.root.getFile('log.txt', {create: false}, function (fileEntry) { 
fileEntry.remove (function() { 
console .1og(' 文 件 已 删除 ."); 
}, errorHandler); 
}, errorHandler); 


| 
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9.4.8 创建 目录 


我 们 平时 都 会 将 各 种 文件 分 门 别 类 地 放置 在 不 同 的 目录 下 ， 使 用 FileSystem 对 象 也 可 以 实现 
对 目录 的 各 种 操作 。 先 来 看 下 面 一 段 代码 : 
window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { 
Var directoryName='MyFiles'; 
fs.root.getDirectory (directoryName, {create: true}, function(dirEntry) { 
console.1og (directoryName+' 目 录 创 建成 功 ! '); 
}, errorHandler); 
}, errorHandler); 


在 这 段 代码 中 ， 回 调 函 数 获取 FileSystem 对 象 仿 ， 再 通过 fs.root.getDirectory 方法 创建 一 个 目 
录 。 该 方法 的 第 一 个 参数 指定 目录 的 名 称 ， 第 二 个 参数 create 为 tue， 指 定 当 目 录 不 存在 时 创建 该 
目录 ， 如 果 目 录 存 在 也 不 会 报错 ， 第 三 个 参数 是 一 个 回调 函数 ， 返 回 DirEntry 对 象 ， 用 于 对 目录 
的 操作 。 

以 上 方法 可 以 创建 一 个 指定 的 目录 ， 如 果 要 创建 该 目录 的 子 目录 该 怎么 做 呢 ? 只 需要 设置 
directoryName='MyFiles/Photo'， 然 后 执行 一 次 这 段 代 码 就 可 以 了 。 但 是 ， 如 果 没有 创建 父 级 目录 ， 
而 是 直接 创建 子 目 录 ， 那 么 FileSystem API 是 会 报错 的 。 

一 -一 一 - 寺 一 一 -一 一 - 寺 一 一 - 寺 一 一 - 寺 一 一 - 杀 一 一 -一 一 -一 一 -一 一 -一 一 -一 
实践 

对 于 目录 层级 比较 多 的 时 候 ， 依 次 创建 各 级 目录 是 一 件 非常 烦琐 的 事情 ， 我 们 可 以 将 多 级 目 
录 设 置 为 一 个 字符 串 ， 使 用 split 方法 将 其 转换 成 数组 ， 再 将 数组 中 的 每 一 项 作为 参数 传递 给 
directoryName， 这 样 就 可 以 直接 创建 多 级 目录 了 ， 有 兴趣 的 读者 可 以 亲自 动手 试 一 试 。 

一 -一 一 下 一 一 二 一 一 下 一 一 上 玫 一 一 全 一 一 仆 一 一 全 一 一 上 全 一 一 下 一 一 全 一 一 条 -一 


9.4.9 读 取 目录 内 容 


如 果 要 读 取 目 录 的 内 容 ， 就 需要 使 用 DirectoryReader 对 象 ， 并 循环 调用 该 对 象 的 readEntriesO 
方法 ， 当 该 方法 不 返回 结果 时 ， 目 录 的 所 有 内 容 将 全 部 返回 。 读 取 目 录 内 容 的 代码 如 下 : 

window.requestFileSystem = window.requestFileSystem || 
window.webkitRequestFileSystem; 

window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, 
errorHandler); 

function toArray(list) { 

return Array.prototype.slice.calll(list || [], 0); 
} 


function listResults (entries) { 


entries.forEach (function(entry, i) { 
console.log (entry.name); 
]) 7 

} 
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function onInitFs(fs) { 
var dirReader = fs.root.createReader (); 
Var entries = []7 
var readEntries = function() { 
dirReader.readEntries (function(results) { 
if (!results.length) { 
entries.forEach (function(entry, i) { 
console.log (entry.name) 7 
]) 7 
} else { 
entries = entries.concat (toArray (results)); 
FeadEntries () 7 
} 
}, errorHandler); 
] 7 
readEntries () 7 


} 


在 这 段 代 码 中 ，onInitFs 主 回调 函数 中 创建 了 一 个 DirectoryReader 对 象 dirReader， 通 过 该 对 
象 的 readEntries 方法 读 取 目 录 内 容 。 如 果 有 返回 值 ， 就 将 返回 值 存储 在 entries 数组 中 ， 如 果 没 有 
返回 值 ， 就 说 明 目 录 已 读 取 完 成 ， 通 过 forEach 函数 循环 遍历 返回 结果 ， 并 输出 目录 内 容 的 名 称 。 


这 段 代码 执行 后 的 效果 如 下 图 所 示 。 


esystem Ap 
« 3 © [DlocalhosUFilesystemAPI2 html 


QD ements Nemwore Sources Trmaine Profles Razourees Ai Ca 
回避 


9.4.10 ”删除 目录 


删除 目录 操作 与 删除 文件 操作 大 同 小 异 ， 删 除 目录 时 需要 使 用 DirectoryEntry 对 象 的 


getDirectory 方法 读 取 目录 ， 然 后 通过 remove 方法 删除 目录 。 删 除 目录 的 代码 如 下 : 


window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { 


Var directioryName="MyFiles"™; 


fs.root.getDirectory (directioryName, {}, function(dirEntry) { 


dirEntry.remove (function() { 
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console.log(directioryName+ "目录 已 删除 ! '); 
}, errorHandler); 
}, errorHandler); 
}, errorHandler); 


在 指定 删除 目录 的 名 称 时 ， 如 果 要 删除 的 目录 下 还 有 子 目录 ， 则 需要 先 删除 子 目 录 ， 
注意 再 逐 级 向 上 删除 父 目 录 .。 


9.4.11 ”复制 文件 或 目录 


在 FileSystem API 中 可 以 使 用 FileEntry 和 DirectoryEntry 的 copuTo0 方 法 复制 文件 和 文件 夹 ， 
该 方法 会 自动 以 递归 的 方式 复制 文件 夹 。 如 果 要 将 文件 复制 到 指定 的 目录 ， 首 先 需 要 通过 getFile 
方法 获取 文件 ， 再 通过 getDirectory 方法 获取 目标 目录 ， 最 后 使 用 文件 的 copyTo 方法 指定 目标 为 
获取 的 目录 即 可 相关 代码 如 下 : 
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, 
errorHandler); 
function onInitFs(fs) { 
Var fileName="log.txt"; 
var directoryName="MyFiles"; 
fs.root.getFile(fileName, {create: false}, function(fileEntry) { 
fs.root.getDirectory (directoryName, {}, function(dirEntry) { 
fileEntry.copyTo (dirEntry); 
console .10g ("文件 "+fileName+" 已 经 复制 到 目录 "+directoryName+"! 
},errorHandler); 
}, errorHandler); 


} 


同 理 ， 如 果 要 将 一 个 文件 夹 复制 到 另 一 个 文件 夹 ， 需 要 依次 获取 源 目录 与 目标 目录 ， 再 通过 
源 目录 的 copyTo 方法 指定 目标 为 目标 目录 即 可 。 相 关 代码 如 下 : 


window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, 
errorHandler); 
function onInitFs(fs) { 
var directoryName="MyFiles"; 
Var directoryNameNew="MyFilesNew"; 


fs.root.getDirectory (directoryName, {}, function(dirEntry) { 
fs.root.getDirectory (directoryNameNew, {create: true}, 
function(dirEntryNew) { 
dirEntry.copyTo (dirEntryNew); 
console.10g ("目录 "+directoryName+" 已 经 复制 到 目录 " 
+directoryNameNew+"!"); 
}.errorHandler); 
}, errorHandler); 
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9.4.12 ”移动 文件 或 目录 


在 FileSystem API 中 可 以 使 用 FileEntry 和 DirectoryEntry 的 moveTo( 方 法 移动 文件 和 文件 夹 ， 
该 方法 会 自动 以 递归 的 方式 复制 文件 夹 。moveTo 方法 有 两 个 参数 :第 一 个 参数 是 目标 目录 的 父 目 
录 ; 第 二 个 参数 是 文件 或 目录 的 名 称 。 移 动 文件 到 指定 目录 的 代码 如 下 : 
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, 
errorHandler); 
function onInitFs(fs) { 
Var fileName="logNew.txt"; 
Var directoryName="MyFiles"; 
fs.root.getFile(fileName, {create: false}, function(fileEntry) { 
fs.root.getDirectory (directoryName, {}, function(dirEntry) { 
fileEntry.moveTo (dirEntry); 
console.1o0g ("文件 "+fileName+" 已 经 移动 到 目录 "+directoryName+"!"); 
},errorHandler); 
}, errorHandler); 


如 果 第 一 个 参数 与 源 文件 的 目录 相同 ， 第 二 个 参数 与 源 文件 的 名 称 不 同 ， 此 时 执行 
注意 oveTo 方法 就 会 重 命名 文件 或 目录 。 


9.4.13 ”filesystem: 网 址 


在 介绍 FileReader 对 象 的 时 候 ， 我 们 以 DataURL 的 方式 读 取 图 片 文件 ， 并 将 其 展示 在 赋值 给 
img 元 素 的 src 属性 ( 详 见 9.3.5 节 )。 在 FileSystem API 中 ,我 们 可 以 使 用 全 新 的 网 址 机 制 (filesystem:) 
为 src 或 href 属性 赋值 。 首 先 使 用 FileEntry 对 象 获取 一 个 图 片 文件 ， 然 后 调用 toURL( 方 法 得 到 图 
片 文件 的 filesystem: 网 址 ， 并 将 其 赋值 给 img 元 素 的 sre 属性 。 相 关 代码 如 下 : 

window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { 

fs.root.getFile("MyImage.png", {create: false}, function(fileEntry) { 
Var img = document.createElement ('img'); 
img.src = fileEntry.toURL(); // filesystem:http://example.com/ 
temporary/myfile.png 
document .body .appendchild (img); 
}, errorHandler); 
},errorHandler); 


另外 ， 如 果 已 经 知道 flesystem: 网 址 ， 还 可 以 使 用 resolveLocalFileSystemURL0O 方 法 获取 到 
FileEntry 对 象 ， 然 后 进行 赋值 、 移 动 、 重 命名 等 其 他 操作 。 例 如 根据 多 esystem: 网 址 获取 FileEntry 
对 象 后 ， 再 调用 copyTo 方法 复制 文件 的 代码 如 下 : 


window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL || 


window.webkitResolveLocalFileSystemURL; 
var url = "filesystem:http://localhost/temporary/MyImage.png'; 
Var directoryName="MyFiles"; 
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window.resolveLocalFileSystemURL(url, function(fileEntry) { 
window.requestFileSystem (window.TEMPORARY, 1024*1024, function(fs) { 


fs.root.getDirectory (directoryName, {}, function(dirEntry) { 
fileEntry.copyTo (dirEntry); 


},errorHandler); 


},errorHandler); 


]) 


测试 题 


基于 
(2) 
《3 
(4) 
(5) 
(6) 


本 章 了 
File 对 象 、 


在 HIML5 中 ， 什 么 文件 是 存储 二 进 制 文件 的 基础 ? 

在 HIML5 中 ，File 对 象 与 Filelist 对 象 有 什么 区 别 ? 

在 HTMLS5 中 加 载 文件 时 ， 如 何 根据 文件 的 修改 日 期 显示 文件 ? 
在 HIML5 中 如 何 判断 浏览 器 是 否 支持 FileReader 对 象 ? 

使 用 FileSystem API 创建 文件 时 可 以 创建 哪 种 类 型 的 文件 ? 

如 何 使 用 FileSystem API 复制 文件 夹 中 的 多 个 文件 ? 


9.5 “本章 小 结 


E 要 介绍 了 HTMLS5 中 File API 的 基本 概念 及 读 取 文 件 操作 的 一 些 方式 , 包括 Blob 对 象 、 
FileList 对 象 和 FileReader 对 象 ， 以 及 使 用 FileReader 对 象 读 取 文件 的 方法 和 事件 ， 同 时 


还 介绍 了 FileSystem API 中 关于 文件 和 文件 夹 的 创建 、 复 制 、 删除、 移动 等 操作 。 通 过 本 章 的 学 习 ， 


读者 应 该 对 


File API 有 一 个 基本 的 认识 ， 并 掌握 在 HTML5 中 文件 和 文件 夹 的 操作 方法 。 


拖 放 API 与 桌面 通知 API 


HTML5 不 仅 为 开发 人 员 提供 了 很 多 便利 ,而且 还 在 Web 展现 方面 增强 了 很 多 功能 。 拖 放 API 
实现 了 用 户 与 界面 的 友好 交互 ， 而 桌面 通知 API 则 突破 了 传统 通知 只 能 在 一 个 页 面 显 示 的 束缚 。 
本 节 将 针对 这 两 个 API 的 使 用 方法 进行 详细 介绍 。 


10.1 拖 放 API (Drag and Drop API) 


在 HTMLS5 语言 中 ， 直 接 提供 了 拖 放 drag 和 drop 的 API， 原 本 只 能 实现 在 浏览 器 内 的 拖 放 ， 
现在 还 可 以 实现 在 不 同 的 应 用 程序 之 间 的 拖 放 。 拖 放 一 一 抓 取 一 个 对 象 后 将 其 拖 到 另 一 个 位 置 , 在 
HTMLS5 语言 中 ， 任 何 元 素 都 能 够 被 拖 放 。 基 本 上 所 有 的 新 版 本 浏览 器 都 支持 拖 放 功能 。 

10.1.1 实现 拖 放 的 步骤 
实现 拖 放 的 步骤 主要 有 两 个 。 


(1) 将 对 象 的 属性 设置 为 可 拖 放 ， 即 draggable="true"。 
(2) 编写 有 关 拖 放 事件 的 处 理 函数 。 


与 拖 放 相 关 的 事件 如 下 表 所 示 。 


事 件 产生 事件 的 元 素 描 述 

dragstart 被 拖 放 的 元 素 开始 拖 放 操作 

drag 被 拖 放 的 元 素 拖 放 过 程 中 

dragenter 拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 开 始 进入 本 元 素 的 范围 内 


dragover 拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 正在 本 元 素 范围 内 移动 
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( 续 表 ) 
事件 产生 事件 的 元 素 描 述 
dragleave 拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 离开 本 元 素 的 范围 
drop 拖 放 的 目标 元 素 有 其 他 元 素 被 拖 放 到 了 本 元 素 中 
dragend 拖 放 的 目标 元 素 拖 放 操作 结束 


10.1.2 ”使 用 DataTransfer 对 象 


dataTransfer 对 象 是 事件 对 象 的 一 个 属性 ， 用 于 从 被 拖 搜 元 素 向 放置 目标 传递 字符 串 格式 的 数 
据 。 因 为 它 是 事件 对 象 的 属性 ， 所 以 只 能 在 拖 放 事件 的 事件 处 理 程序 中 访问 dataTransfer 对 象 。 在 
事件 处 理 程序 中 ， 可 以 使 用 这 个 对 象 的 属性 和 方法 来 完善 拖 放 功能 。 

1. dataTransfer 的 属性 


e dropEffect 属性 : 表示 拖 放 操 作 的 视觉 效果 。 该 效果 必须 在 用 effectAllowed 属性 指定 的 允许 
的 视觉 效果 的 范围 内 ， 人 允许 指定 的 值 为 none、copy、link、move。 

@ ”effectAllowed 属性 : 用 来 指定 当 元 素 被 拖 放 时 所 允许 的 视觉 效果 ,可 以 指定 的 值 为 none、copy、 
copyLink、 copyMove、link、linkMove、move、all、unintialize。 

@ type 属性 : 存 入 数据 的 种 类 ， 字 符 串 的 伪 数 组 。 


2. dataTransfer 的 方法 


®@ void clearData(DOMString format) 方 法 : 清除 DataTransfer 对 象 中 存放 的 数据 ， 如果 省 略 参 数 ， 
则 清除 全 部 数据 。 

® void setData(DOMString format, DOMString data) 方 法 : 向 DataTransfer 对 象 内 存 入 数据 。 

e DOMString getData(DOMString format) 方 法 : 从 DataTransfer 对 象 中 读 取 数 据 。 

® void setDragImage(Element image, long x, long y) 方 法 : 用 img 元 素来 设置 拖 放 图 标 ( 部 分 浏览 
器 中 可 以 用 canvas 等 其 他 元 素 进行 设置 )。 


setData() 方 法 在 拖 放 开 始 时 向 dataTransfer 对 象 中 存 入 数据 , 用 type 属性 来 指定 数据 MIME 类 
型 ,在 拖 动 结束 时 读 取 dataTransfer 对 象 中 的 数据 。clearData() 方 法 可 以 用 来 清除 DataTransfer 对 象 
中 的 数据 。 


10.1.3 设置 拖 放 时 的 视觉 效果 


dropEffect 属性 与 effectAllowed 属性 结合 起 来 可 以 设置 拖 放 时 的 视觉 效果 。effectAllowed 属性 表 
示 当 一 个 元 素 被 拖 动 时 所 人 允许 的 视觉 效果 , 一 般 在 ondragstart 事件 中 设置 , 允许 设置 的 值 为 none、copy、 
copyLink、copyMove、link、linkMove、move、all、unintialize。dropEffect 属性 表示 实际 拖 放 时 的 视觉 
效果 ， 一 般 在 ondragover 事件 中 设置 ， 允 许 设置 的 值 为 none、copy、link、move。dropEffect 属性 所 表 
示 的 实际 视觉 效果 必须 在 effectAllowed 属性 所 表示 的 允许 的 视觉 效果 范围 内 。 规 则 如 下 : 

e@ 如 果 effectAllowed 属性 设置 为 none， 则 不 允许 拖 放 元 素 。 

@ 如果 dropEffect 属性 设置 为 none， 则 不 允许 被 拖 放 到 目标 元 素 中 。 
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@ 如果 effectAllowed 属性 设置 为 all 或 不 设置 ， 则 dropEffect 属性 允许 被 设置 为 任何 值 ， 并 且 按 
指定 的 视觉 效果 进行 显示 。 

@ 如 果 effectAllowed 属性 设置 为 具体 效果 ( 不 为 none、all )，dropEffect 属性 也 设置 了 具体 视觉 
效果 ， 则 两 个 具体 效果 值 必须 完全 相等 ， 否 则 不 允许 将 被 拖 放 元 素 拖 放 到 目标 元 素 中 。 


10.1.4” 自 定义 拖 放 图 标 


图 


图 


除了 上 面 所 说 的 使 用 effectAllowed 属性 与 dropEffect 属性 外 , 在 HIML5 中 还 允许 自 定义 拖 放 
标 一 一 是 指 在 利用 鼠标 拖 动 元 素 的 过 程 中 ， 位 于 鼠标 指针 下 部 的 小 图 标 。 
DataTransfer 对 象 有 一 个 setDragImage0 方 法 ， 该 方法 有 三 个 参数 ， 第 一 个 参数 image 设置 为 


拖 放 图 标的 图 标 元 素 ; 第 二 个 参数 为 拖 放 图 标 离 鼠 标 指针 的 x 轴 方 向 的 位 移 量 ; 第 三 个 参数 是 拖 放 


标 离 鼠 标 指针 y 轴 方向 的 位 移 量 。 
Var src = document.getElementById("img01"); 
// 开 始 拖 放 操作 
src.ondragstart = function (e) { 
// 创 建 一 个 img 元 素 ， 并 设置 其 src 和 width 属性 

Var dragIcon = document.createElement ('img'); 
dragIcon.src = 'img/dragimg.png'"7 
dragIcon.width = 100; 
// 获 取 dataTransfer 对 象 ， 设 置 自 定义 拖 放 图 标 
var dt = e.dataTransfer; 
dt.setDragImage (dragIcon, -10, -10); 
}; 


10.1.5 ”实例 : 选择 图 形 


如 


在 本 例 中 综合 运用 HTML5 的 拖 放 API, 将 图 形 中 的 颜色 拖 放 到 对 应 的 
Fe 

<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"/> 


区 


域 。 实 现 的 相关 代码 


<style type="text/css"> 
#divl, #div2, #div3, #div4 
{ 
border: 3px dashed #ccc; 
float: left; 
margin: 10px; 
min-height: 100px; 
padding: 10px; 
width: 220px; 
1 
</style> 
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<script type="text/javascript"> 
// 关 闭 默 认 处 理 
function allowDrop(e) 
{ 
e.preventDefault (); 
} 
// 拖 放 操作 


function drag(e) 

{ 
// 设 置 传递 的 对 象 
e.dataTransfer.setData("Text",e.target.id); 
// 设 置 自 定义 拖 动 图 标 
Var dragIcon = document .createElement ('img'); 
dragIcon.src = 'img/dragimg.png'; 
var dt = e.dataTransfer; 
dt.setDragImage (dragIcon, -10, -10); 


function drop (ev) 
{ 


ev.preventDefault () 7 


// 获 取 传递 过 来 的 对 象 
var data=ev.dataTransfer.getData("Text"); 
// 将 新 对 象 加 入 到 该 对 象 中 
ev.target.appendChild(document .getElementById (data)); 
} 
</script> 
</head> 
<body> 


<div id="divl" ondrop="drop (event)" ondragover="allowDrop (event)"> 
<h2> 请 选择 颜色 </h2> 
<img src="img/bg_01.png" draggable="true" ondragstart="drag (event)" 
id="dragl" /> 
<img src="img/bg 02.png" draggable="true" ondragstart="drag (event)" 
id="drag2" /> 
<img src="img/bg 03.png" draggable="true" ondragstart="drag (event)" 
id="drag3" /> 
</div> 
<div id="div2" ondrop="drop (event)" ondragover="allowDrop (event)"> 
<h2> 红 色 </h2> 
</div> 
<div id="div3" ondrop="drop (event)" ondragover="allowDrop (event)"> 
<h2> 绿 色 </h2> 
</div> 
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<div id="div4" ondrop="drop (event)" ondragover="allowDrop (event) "> 
<h2> 蓝 色 </h2> 

</div> 

</html> 


ET 
© [9 localhost 


请 选择 颜色 


拖 放 前 的 效果 


[ET 
《Clocalhosya/ 二 元 例 hi 


请 选 搓 颜 色 红色 


拖 放 过 程 中 的 效果 


Er 
入 [Diocaihosta/ 施 的 示 ht 


请 选择 颜色 


拖 放 后 的 效果 
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10.2 桌面 通知 API (Notification API) 


有 时 我 们 打开 一 个 网 页 ， 在 网 页 的 右 下 角 会 自动 弹出 一 个 窗口 ， 显 示 一 些 新 闻 或 导航 之 类 的 
信息 ， 这 就 是 桌面 通知 。 在 HTMLS5 中 同样 也 可 以 实现 这 样 的 功能 。 


10.2.1 桌面 通知 API 的 必要 性 


以 往 的 桌面 通知 都 是 将 消息 放 在 一 个 div 中 , 当 用 户 打 开 网 页 或 者 每 隔 一 段 时 间 就 会 在 网 页 的 
右 下 角 自 动弹 出 消息 。 使 用 这 种 方式 实现 的 消息 推送 功能 ， 只 能 局 限 在 某 一 个 网 页 上 推送 消息 ， 如 
果 用 户 离开 了 这 个 网 页 ， 即 使 有 消息 推送 过 来 , 用 户 也 是 看 不 到 的 ， 除 非 用 户 返回 到 推送 消息 的 网 
页 。 而 在 HTML5 中 ， 使 用 webkitNotification 或 Notification 生成 的 消息 依附 于 浏览 器 ， 只 要 浏览 
器 始终 打开 ， 无 论 用 户 正在 浏览 哪个 网 页 ， 都 能 看 到 推送 的 消息 。 


10.2.2 ”桌面 通知 生成 流程 
在 HTML5 中 生成 一 个 桌面 通知 ， 可 参照 以 下 流程 : 
(1) 检查 浏览 器 是 否 支持 Notification。 
(2) 检查 浏览 器 的 通知 权限 ， 浏 览 器 必须 允许 通知 才能 生成 消息 。 
(3) 如 果 浏 览 的 权限 不 够 ， 需 要 获取 浏览 器 的 通知 权限 。 


(4) 创建 消息 通知 。 
(5) 展示 消息 通知 。 


早期 的 chrome 浏览 器 支持 webkitNotification 对 象 , 但 是 目前 的 chrome 浏览 器 不 支持 ， 
提示 仅 支持 Notification 对 象 。 
10.2.3 实例 : 桌面 通知 的 两 种 实现 方法 


桌面 通知 的 实现 方式 有 两 种 : 一 种 是 使 用 webkitNotification 对 象 ， 另 一 种 是 使 用 Notification 
对 象 。 虽 然 各 浏览 器 对 这 两 个 对 象 的 支持 情况 不 一 样 ， 但 是 真正 标准 化 后 会 统一 支持 。 


1. webkitNotification 对 象 
使 用 webkitNotification 对 象 创 建 桌面 消息 的 代码 如 下 : 


document .getElementById("nButton") .onclick = function(){ 
if (window.webkitNotifications){ 
if (webkitNotifications.checkPermission==0){ 
Var icon Url = "http://www.baidu.com/"; 
var title = "桌面 消息 "; 
var body = "这 是 通过 webkitNotifications 对 象 发 送 的 消息 ! "; 
Var WebkitNotification = webkitNotifications .createNotification 
(icon url, title, body); 
WebkitNotification.show(); 
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}else{ 
document .getElementById("rbutton") .onclick = function () { 
webkitNotifications.requestPermission(); 
3 
} 
jelse alert ("您 的 浏览 器 不 支持 桌面 通知 特性 ， 请 下 载 谷歌 浏览 器 试用 该 功能 ") ; 
}; 
在 这 段 代码 中 ， 首 先 通 过 button 对 象 的 id 获取 该 对 象 ， 并 为 该 对 象 的 onclick 事件 添加 函数 ， 
再 通过 window.webkitNotifications 判断 浏览 器 是 否 支持 notification， 如 果 不 支持 ， 就 直接 通过 alert 
弹出 消息 提示 ; 如 果 支 持 ， 就 通过 webkitNotifications.checkPermission 判断 当前 页 面 是 否 允许 发 送 
通知 。checkPermission 方法 将 返回 0,1,2 三 个 值 ，0 代表 PERMISSION_ALLOWED， 即 “人 允许 ”; 
1 代表 PERMISSION_NOT_ALLOWED, 即 “不 允许 ”; 2 代表 PERMISSION_OENIED， 即 拒绝 。 
如 果 权 限 不 够 ,就 需要 通过 另外 一 个 button 的 onclick 事件 ， 使 用 
webkitNotifications.requestPermission() 方 法 获取 权限 。 调 用 该 方法 后 ， 浏 览 器 的 信息 栏 会 弹出 一 个 
是 否 允许 桌面 通知 的 提醒 。 该 方法 只 能 由 用 户主 动 触发 事件 ， 如 click 或 mouse over， 也 就 是 说 不 
能 在 document.ready 里 面 直接 调用 该 方法 。 获 取 权 限 后 ， 通 过 webkitNotifications.createNotification 
方法 实例 化 一 个 webkitNotifications 对 象 , 最 后 通过 notification.show 方法 在 浏览 器 的 右 下 角 弹 出 一 
个 通知 窗口 。 如 果 需 要 关闭 通知 窗口 ， 则 可 以 调用 notification.cancel 方法 。 


2. Notification 对 象 
使 用 Notification 对 象 创建 桌面 消息 的 代码 如 下 : 


document .getElementById("nButton") .onclick = function () { 
if (window.Notification){ 
if (Notification.permission=="granted"){ 
Var notification = new Notification ("桌面 消息 ", {body:" 这 是 由 
Notification 对 象 创建 的 桌面 消息 ! "}); 
}else { 
document .getElementById("rButton") .onclick = function (){ 
Notification.requestPermission(); 
1 
bs; 
}else alert ("你 的 浏览 器 不 支持 此 特性 ， 请 下 载 谷歌 浏览 器 试用 该 功能 ") ; 
}; 
在 这 段 代码 中 ， 通 过 window.Notification 判断 浏览 器 是 否 支持 notification， 如 果 不 支持 ， 就 给 
出 提示 消息 ; 如 果 支 持 ， 就 进一步 通过 Notification permission 获取 用 户 是 否 希 望 启用 通知 。 如 果 返 
回 default， 则 等 同 于 denied， 意 味 着 用 户 不 想 启用 通知 ， 如 果 返 回 granted， 则 意味 着 用 户 同意 启 
用 通知 。 这 里 需要 注意 的 是 ，permission 属性 是 只 读 的 ， 不 能 手动 进行 修改 。 
如 果 用 户 没 有 启用 通知 ， 则 可 以 通过 Notification.requestPermission 方法 请 求 浏览 器 启用 通知 ， 
此 时 浏览 器 信息 栏 会 弹出 一 个 是 否 允许 桌面 通知 的 提醒 ， 如 下 图 所 示 ， 单 击 “ 人 允许 ”按钮 即 可 。 
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回 Nesfeason 


和 2 © | localhost/3/Notification html 


有 Fhttp://localhost 时 示 守 而 到 知名 ?| 思 许 | 兰 止 


[notiyBetion | euestButon 


如 果 用 户 启 用 通知 ， 就 可 以 通过 Notification 实例 化 一 个 通知 ， 实 例 化 该 对 象 时 有 两 个 参数 ， 
第 一 个 参数 是 通知 的 标题 ， 第 二 个 参数 是 一 组 键 值 对 ， 用 于 设置 通知 的 内 容 等 信息 。Notification 
对 象 没有 show 方法 ， 在 Notification 实例 化 时 ,浏览 器 就 已 经 自动 处 理 Notification 的 显示 过 程 了 ， 
桌面 通知 的 效果 如 下 图 所 示 。 利 用 鼠标 单 击 桌面 通知 即 可 将 其 关闭 ， 或 者 调用 Notification.close 方 
法 也 可 以 将 其 关闭 。 


点 面 消息 
这 是 由 Notification 对 象 创建 的 点 面 消息 ! 


测试 题 


(1) 在 HIML5 中 ， 要 实现 拖 放 效果 ， 需 要 将 对 象 的 哪个 属性 设置 为 tue? 
(2) 在 HTMLS5 的 拖 放 操作 中 使 用 什么 对 象 传递 数据 ? 

(3) 在 HIML5 中 ， 能 否 为 拖 放 操作 自 定义 图 标 ? 如 何 实现 ? 

(4) HIML5 中 的 桌面 通知 与 传统 的 桌面 通知 相 比 有 哪些 优势 ? 

(5) 在 HIML5 中 ， 如 何 判断 浏览 器 是 否 支持 Notification? 

(6) 在 HIML5 中 ， 实 现 桌面 通知 有 哪 两 种 方法 ? 


10.3 ”本 章 小 结 


本 章 主要 介绍 了 HTML5 中 拖 放 API 和 桌面 通知 API 的 使 用 方法 。 通 过 本 章 的 学 习 ， 读 者 应 
该 掌握 使 用 拖 放 API 实现 拖 放 的 步骤 ， 以 及 自 定义 拖 放 图 标的 实现 方法 。 对 于 桌面 API， 读 者 应 该 
了 解 使 用 webkitNotification 对 象 创建 桌面 通知 的 方法 ， 并 熟练 掌握 使 用 Notification 创建 桌面 通知 
的 方法 。 


本 地 存储 与 离线 应 用 


本 地 存储 和 离线 应 用 是 HTMLS5 中 的 两 个 特性 。 本 地 存储 实现 了 Web 应 用 对 数据 本 地 化 存储 
的 功能 ， 也 为 Web 应 用 操作 本 地 数据 提供 了 一 个 标准 。 离 线 应 用 最 大 程度 上 满足 了 Web 应 用 在 离 
线 状 态 下 的 正常 操作 ， 延 伸 了 Web 应 用 的 功能 。 


11.1 认识 Web Storage 


Web Storage 就 是 一 种 让 Web 页 面 能 够 以 键 值 对 的 形式 ， 在 客户 端 Web 浏览 器 中 将 数据 存储 
在 本 地 的 方法 。 这 个 概念 和 cookie 相似 ， 但 是 cookie 有 4KB 大 小 的 限制 ， 且 在 用 户 离开 Web 站 
点 、 关 闭 标签 、 退 出 浏览 器 时 数据 会 丢失 ， 而 Web Storage 则 会 将 这 些 数据 保存 在 本 地 。 


11.1.1 客户 端 数据 存储 的 历史 与 现状 


对 于 客户 端 数据 存储 来 说 ， 桌 面 应 用 程序 一 直 优 于 Web 程序 。 桌 面 应 用 程序 可 以 将 程序 运行 
状态 和 一 些 参数 信息 存储 于 注册 表 、ini 文件 、 嵌 入 式 数 据 库 或 自 定义 的 任何 格式 的 文件 中 , 而 Web 
程序 在 客户 端 数据 存储 方面 一 直 表 现 不 佳 。 

cookie 发 明之 后 ， 虽 然 Web 程序 可 以 在 本 地 存储 少量 数据 ， 但 随 着 需求 的 不 断 增 长 ，Web 程 
序 需要 更 大 的 存储 空间 ， 并 且 不 受 页 面 刷新 的 影响 ， 同 时 也 不 需要 提交 到 服务 器 。 于 是 ，Microsoft 
发 明了 DHTML 行为 (DHTML Behaviors) ， 其 中 有 一 个 行为 叫 作 userData (用户 数据 )。userData 
允许 每 一 个 域名 的 页 面 保存 64KB 数据 ,包括 有 层次 结构 的 基于 XML 的 结构 。 随 后 Adobe 公司 在 
其 系列 产品 Flash 上 不 断 改进 本 地 存储 的 功能 ,Google 公 司 也 开发 出 了 针对 本 地 存储 的 浏览 器 插件 ， 
并 嵌入 基于 SQLite 的 嵌入 式 数据 库 。 

在 HIML5 之 前 ， 如果 要 解决 客户 端 数据 存储 的 问题 ， 要 么 选择 特定 的 浏览 器 ， 要 么 安装 第 三 
方 插件 。 而 HTMLS5 很 好 地 解决 了 这 一 问题 ， 提 供 了 一 套 标 准 的 API， 多 种 浏览 器 提供 支持 ， 不 需 
要 安装 第 三 方 插件 ， 这 就 是 Web Storage。 
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11.1.2 ”Web Storage 概述 


Web Storage 是 HTML5 引入 的 一 个 非常 重要 的 功能 ， 可 以 在 客户 端 本 地 存储 数据 ， 而 这 种 存 
储 是 在 Web 上 的 数据 存储 。 具 体 来 说 ，Web Storage 又 分 为 以 下 两 种 。 


1. sessionStorage 


sessionStorage 是 将 数据 保存 在 session 对 象 中 。session 是 指 用 户 浏览 网 站 所 花费 的 时 间 , session 
对 象 中 可 以 保存 任何 数据 。 但 是 浏览 器 一 旦 关闭 ，session 中 保存 的 数据 就 会 丢失 。 


2. localStorage 


localStorage 是 将 数据 保存 在 客户 端 本 地 ， 通 常情 况 下 都 会 保存 在 硬盘 或 存储 介质 中 ， 这 样 即 
使 关闭 了 浏览 器 ， 数 据 仍然 存在 ， 下 次 访问 网 站 时 还 可 以 继续 使 用 。 

不 难看 出 ，sessionStorage 是 一 种 临时 存储 数据 的 方法 ， 而 localStorage 则 可 以 将 数据 持久 保存 
下 来 ， 这 就 是 两 者 的 区 别 。 

无 论 是 sessionStorage 还 是 localstorage， 都 可 以 使 用 相同 的 API 操作 数据 ， 如 下 表 所 示 。 


方法 描 述 
setItem(keyvalue): 保存 数据 
getItem(key): 读 取 数据 
removeltem(key); 删除 单个 数据 
clear0; 删除 所 有 数据 
key(index): 得 到 某 个 索引 的 key 


0 这 里 的 key 和 value 必须 是 字符 串 ， 也 就 是 说 ，Web Storage 的 API 只 能 操作 字符 串 。 
提 示 
11.1.3 ”实例 : 一 个 Web Storage 的 简单 应 用 


在 本 实例 中 ， 我 们 要 实现 一 个 简易 Web 日 记 本 的 功能 ， 通 过 录入 标题 和 日 记 内 容 ， 将 信息 保 
存在 localStorage 中 ， 并 将 已 经 保存 的 信息 以 标题 的 形式 显示 在 列表 中 ， 同 时 能 够 根据 标题 查找 相 
应 的 日 记 。 相 关 的 代码 如 下 : 

<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"/> 

<title>11.1.1</title> 

<script language="javascript"> 

// 保 存 数据 

function save(){ 

Var title = document .getElementById("txtTitle") .value; 
Var Content = document .getElementById ("txtContent") .value; 


localSstorage.setItem(title,content); 
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document .getElementById ("txtTitle") .value=""; 
document .getElementById ("txtContent") .value=""; 
loadAll (); 
} 
// 查 找 数据 
function search(){ 
Var title = document .getElementById ("searchTitle") .value; 
if (title==""){ 
loadAll (); 
} 
else{ 
Var content = localStorage.getItem(title); 
Var SearchContent = document .getElementById("searchContent"); 
searchContent .innerHTML ="<h2>"+title+"</h2>"+ content; 


} 
// 加 载 数据 
function loadAll(){ 
var list = document.getElementById("1ist")7 
if(localStorage.length>0){ 
Var result = "<ul>"; 
for (Var i=0;i<localStorage.length;i++){ 
Var title = localStorage.key(i) 7 
result += "<li>"+titlet+"</li>"; 
} 
result += "</ul>"; 
list.innerHTML = result; 
}elsef{ 
list.innerHTML 


"还 没有 写 日 记 ， 现 在 就 开始 写 吧 ! "; 


} 
</script> 
</head> 
<body> 
<div> 
<hgroup style="margin-bottom:10px"> 
<label> 标 题 ; </label> 
<input type="text" id="txtTitle" name="txtTitle"/> 
</hgroup> 
<hgroup style="margin-bottom:10px"> 
<label> 内 容 : </1label> 
<textarea id="txtContent" rows="15" cols="50" ></textarea> 
</hgroup> 
<input type="button" onclick="save()" value=" 新 增 "/> 


<hr/> 
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<label for="search"> 标 题 : </label> 
<input type="text" id="searchTitle" name="searchTitle"/> 
<input type="button"” onclick="search()"” value=" 查 找 "/> 
<p id="searchContent"><br/> 
</p> 

</div> 

<br/> 

<div id="list"> </div> 

</body> 

</html> 


界面 效果 如 下 图 所 示 。 


EE 和 
和 会 & (Diocalhosa/webStorage htm 
村 站， 


这 个 界面 的 元 素 非常 简单 ， 相 关 功 能 都 是 通过 javascript 实现 的 。 在 这 段 代 码 中 ，save 方法 用 
于 保存 录入 的 标题 和 内 容 ， 保 存 完成 后 ， 清 除 标题 框 和 内 容 框 的 信息 ， 最 后 调用 loadAll 方法 加 载 
所 有 已 经 保存 的 信息 ， 以 标题 列表 的 形式 展现 。 在 查询 区 域 的 标题 栏 中 输入 要 查找 的 标题 名 称 ， 单 
击 查 找 按钮 时 调用 search 方法 ， 按 标题 查找 相关 内 容 。 


11.2 ”使 用 Web Storage 


通过 以 上 的 介绍 ， 我 们 对 Web Storage 有 了 一 个 基本 的 认识 。 下 面 我 们 就 来 详细 介绍 Web 
Storage 在 使 用 过 程 中 需要 注意 的 一 些 问题 。 
11.2.1 检测 浏览 器 的 支持 


虽然 目前 已 经 有 很 多 浏览 器 都 支持 Web Storage 功能 , 但 是 在 实际 使 用 过 程 中 , 我 们 仍然 需要 
对 浏览 器 的 支持 进行 检测 ， 避 免 某 些 浏览 器 不 支持 Web Storage 而 出 现 问 题 。 检 测 浏览 器 是 否 支 持 
Web Storage 的 代码 非常 简单 ， 如 下 所 示 : 
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if (window.sessionSstorage){ 


console.10g ("您 的 浏览 器 支持 sessionstorage! "); 
}elsef{ 

console.1og ("抱歉 ! 您 的 浏览 器 不 支持 sessionStorage! "); 
} 
if (window.localstorage) { 


console.1o0g ("您 的 浏览 器 支持 localSstorage! "); 
}else { 


console.1og ("抱歉 ! 您 的 浏览 器 不 支持 localstorage! "); 


11.2.2” 存 入 与 读 取 数 据 


无 论 是 sessionStorage 还 是 localStorage, 都 使 用 相同 的 API 方法 对 数据 进行 存 入 和 读 取 。 读 入 
数据 时 使 用 setttem(key,value) 方 法 ， 读 取 数据 时 使 用 getItem(key) 方 法 。 例 如 将 key 为 “name”， 
value 为 “ 张 三 ” 的 数据 保存 到 localStorage 中 ， 可 以 使 用 以 下 代码 。 


localStorage .setItem (name," 张 三 ") 7 


如 果 要 将 该 值 从 localstorage 中 取出 ， 就 可 以 使 用 以 下 代码 。 


localStorage .getItem (name) 7 


在 localStorage 中 ， 所 有 的 数据 都 是 以 键 值 对 的 形式 存在 ， 作 为 key 的 键 是 唯一 的 ， 不 
能 重复 ， 如 果 重 复 ， 后 面 保存 的 value 值 将 会 覆盖 之 前 的 值 。 所 以 ， 如 果 要 修改 某 个 key 
的 value 值 ， 就 可 以 用 相同 的 key， 不 同 的 value 再 次 保存 数据 。sessionStorage 的 用 法 
相同 。 


另外 ,sessionStorage 和 localStorage 除了 能 保存 字符 串 数据 外 , 还 可 以 保存 JSON 格式 的 数据 。 
例如 我 们 有 一 个 数据 同时 包含 多 个 字段 的 数据 , 如 name、age、email 等 , 此 时 就 可 以 定义 一 个 JSON 
格式 的 字符 串 ， 再 通过 setItem 方法 进行 保存 ， 但 是 需要 对 value 值 使 用 JSON.stringify 方法 进行 转 
换 。 相 关 代 码 如 下 : 
Var UserInfo ={ 
name:" 张 三"， 
age:"24", 
email:"sanz@163.com" 
] 5 
localStorage .setItem("userInfo",JSON.stringify(userInfo) ) 7 


读 取 JSON 格式 的 数据 也 有 一 些 不 同 ， 我 们 使 用 getttem 方法 获取 数据 后 ， 同 样 还 需要 使 用 
JSON parse 方法 进行 转换 获取 一 个 新 的 对 象 .如 果 要 获取 对 象 中 某 个 属性 的 值 , 可 以 使 用 以 下 代码 : 

Var newUserInfo=JSON.parse (localStorage.getItem("userInfo")); 

Var name=newUserInfo.name; 

Var age=newUserInfo.age7 

var email=newUserInfo.email; 
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11.2.3 ”清除 数据 


对 于 已 经 保存 的 sessionStorage 和 localStorage 数据 ， 我 们 可 以 通过 浏览 器 进行 删除 ， 也 可 以 
通过 调用 removeItem(key) 或 clear0 方 法 进行 删除 。 

如 下 图 所 示 ， 在 Chrome 浏览 器 中 打开 开发 者 工具 选项 ， 在 Resources 选项 卡 中 单 击 左边 的 
localStorage 或 SessionStorage， 就 可 以 查看 当前 浏览 器 本 地 存储 的 数据 ， 在 需要 删除 的 数据 上 单 击 
鼠标 右键 ， 选 择 删除 命令 即 可 删除 数据 。 


11.2.4 ”遍历 操作 


在 11.1.3 节 的 示例 中 ， 我 们 编写 了 一 个 loadAll 方法， 用 于 加 载 所 有 本 地 数据 。 在 该 方法 中 ， 
我 们 使 用 localStorage.length 属性 获取 当前 浏览 器 本 地 数据 的 所 有 数目 , 然后 通过 for 循环 遍历 这 些 
数据 ， 并 使 用 localStoragekeyG) 方 法 获取 每 条 数据 的 key 值 。 

所 以 , 要 对 Web Storage 进行 遍历 , 首先 需要 知道 当前 浏览 器 的 Web Storage 中 有 多 少 条 数据 ， 
然后 才能 对 其 进行 遍历 操作 。 


【分 不 同 的 浏览 器 对 于 本 地 存储 数据 的 位 置 不 一 样 ， 所 以 当前 浏览 器 存储 的 本 地 数据 ， 不 
提示 ”能 通过 其 他 浏览 器 读 取 。 


11.2.5 ”storage 事件 
HIML5 中 还 有 一 个 storage 事件 ， 当 WebStorage 发 生变 化 时 触发 ， 可 以 用 来 监视 不 同 页 面 对 
storage 的 修改 。 使 用 方法 如 下 : 


window.onload=function(){ 


if(window.addEventListener){ 
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window.addEventListener ("storage",handle storage, false); 
jelse if (window.attachEvent){ 
window.attachEvent ("onstorage",handle storage); 
} 

} 

function handle storage(e){ 
if(!e) {e=window.event;} 
ShowStorage (e); 

} 

function showSstorage(e){ 
if(!e) {return;} 
console.log ("url="+te.url); 
console.log("newValue="+e.newValue); 
console.log("oldValue="+e.oldValue); 
console.1log ("key="+e.Kkey); 


; 


在 页 面 初始 化 时 添加 storage 事件 ， 事 件 e 是 一 个 StorageEvent 对 象 ， 提 供 了 很 多 属性 ， 这 里 
介绍 几 个 比较 实用 的 。 
key: 键 值 对 的 键 。 
oldValue: 修改 之 前 的 值 。 
newValue: 修改 之 后 的 值 。 
url: 触发 页 面 改 动 的 url 地 址 。 


0 storage 事件 不 能 取消 ， 在 handle_storage 回调 函数 中 ， 没 有 方法 能 够 终止 事件 。 


提 示 
11.3 ”离线 应 用 


互联 网 正 越 来 越 深刻 地 改变 着 我 们 的 生活 ，Web 应 用 程序 也 在 各 个 领域 发 挥 着 越 来 越 重要 的 
作用 ， 如 果 没有 互联 网 ， 那 么 所 有 的 Web 应 用 都 将 无 法 访问 ， 这 样 会 严重 影响 人 们 的 生活 。 因 此 ， 
在 HTML5 中 新 增 了 对 离线 应 用 的 支持 。 


11.3.1 ”离线 应 用 概述 


离线 应 用 是 指 在 客户 端 与 服务 器 失去 连接 时 ， 仍 然 可 以 通过 本 地 客户 端 进行 操作 。 要 让 Web 
应 用 程序 在 离线 状态 下 也 能 正常 工作 ， 就 需要 将 Web 应 用 程序 的 资源 文件 缓存 在 本 地 ， 当 无 法 访 
问 互联 网 时 ， 还 可 以 使 用 这 些 缓存 文件 运行 Web 程序 。 


11.3.2 ”离线 资源 缓存 


在 访问 某 一 个 网 页 时 , 浏览 器 缓存 会 将 该 网 页 所 需要 的 所 有 资源 缓存 在 本 地 , 如 HTML 文件 、 
CSS 文件 和 JavaScript 脚本 等 ， 但 这 些 缓存 只 服务 于 这 一 个 网 页 ， 而 且 我 们 不 知道 具体 都 缓存 了 哪 
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些 资源 。 本 地 缓存 可 以 很 好 地 为 整个 Web 应 用 程序 服务 ， 我 们 可 以 指定 哪些 文件 需要 缓存 ， 哪 些 
文件 不 需要 缓存 ， 如 有 需要 ,还 可 以 对 这 些 缓存 资源 进行 更 新 。 离 线 资源 缓存 就 是 用 于 指定 应 用 程 
序 在 离线 工作 时 需要 缓存 哪些 资源 文件 ， 通 过 cache manifest 文件 指定 需要 缓存 的 资源 。 当 浏览 器 
首次 在 线 访问 站 点 时 ， 浏 览 器 会 根据 离线 资源 缓存 指定 的 文件 ; 当 失去 连接 处 于 离线 状态 时 ， 再 次 
访问 应 用 程序 ， 浏 览 器 会 自动 加 载 这 些 缓存 文件 ， 保 证 用 户 在 离线 状态 下 也 可 以 使 用 Web 应 用 
程序 。 


11.3.3 Cache Mainfest 基本 用 法 


在 离线 状态 下 ,用 户 访问 的 网 页 将 无 法 显示 ， 如 果 给 网 页 添加 了 Cache Mainfest 文件 ， 指 定 需 
要 缓存 的 资源 ， 这 样 就 可 以 支持 离线 访问 。Cache Mainfest 文件 以 appcache 为 后 级 名 ， 可 以 为 某 一 
个 页 面 单独 指定 一 个 Cache Mainfest 文件 ， 也 可 以 为 整个 站 点 指定 一 个 Cache Mainfest 文件 。 

在 Cache Mainfest 文 件 中 , 可 以 指定 需要 缓存 的 各 种 资源 ,如 HIML 文件 .CSS 文 件 和 JavaScript 
脚本 等 。 有 了 Cache Mainfest 文件 ， 还 需要 在 HTML 元 素 的 mainfest 属性 中 指定 对 应 的 Cache 
Mainfest 文件 ， 这 样 当 用 户 首次 在 线 访问 网 页 时 ， 浏 览 器 会 根据 Cache Mainfest 文件 的 设置 缓存 相 
关 的 资源 文件 ， 而 当 用 户 离线 访问 时 ， 这 个 Web 应 用 也 可 以 正常 使 用 。 以 下 是 Cache Mainfest 文 
件 的 示例 代码 : 

CACHE MANIFEST 

# VERSION 1.0 

# 直接 缓存 的 文件 

CACHE: 

action.html 

topbox .css 

topbox .js 

images/topbox .png 

# 需要 在 线 缓存 的 文件 

NETWORK : 

online .html 


# 替代 方案 

FALLBACK: 

online.js offline.js 
CACHE: 
images/midbox.png 


[7 服务 器 必须 支持 text/cache-manifest 这 个 MIME 类 型 才能 正确 使 用 离线 缓存 ， 因 为 
HTML5 中 规定 manifest 文件 的 MIME 类 型 是 text/cache-manifest. 如 果 使 用 的 服务 器 是 
Apache 服务 器 ， 则 需要 在 设置 中 找到 mime.types 文件 ， 然 后 在 文件 的 最 后 添加 下 面 这 
段 代 码 。 
text/cache-manifest manifest 
如 果 使 用 的 是 IS 服务 器 ， 则 需要 进行 以 下 设置 : 
(1) 右键 选择 默认 网 站 或 需要 添加 类 型 的 网 站 ， 弹 出 属性 对 话 框 。 


注意 


第 11 章 本 地 存储 与 离线 应 用 | 177 


(2) 选择 “HTTP 头 ”标签 。 

(3) 在 MIME 映射 下 ， 单 击 文件 类 型 按钮 。 

(4) 在 打开 的 MIME 类 型 对 话 框 中 单 击 新 建 按钮 。 

(5) 在 关联 扩展 名 文本 框 中 输入 “manifest”, 在 内 容 类 型 文本 框 中 输入 “text/cache-manifest”， 
然后 单 击 确定 按钮 。 


11.3.4 分析 Cache Mainfest 文件 


在 编写 Cache Mainfest 文件 时 ， 需 要 遵守 Cache Mainfest 文件 的 书写 格式 。 以 上 面 这 段 Cache 
Mainfest 文件 为 例 ， 相 关 的 格式 要 求 如 下 : 


(1) 首 行 必须 是 CACHE MANIFEST。 

(2) 注释 的 内 容 另 起 一 行 ， 以 # 开 头 。 

(3) 建议 添加 Cache Mainfest 文件 的 版 本 信息 ， 如 “# VERSION 1.0”。 

(4) 直接 缓存 资源 归属 于 CACHE 类 型 ， 每 行列 出 一 个 需要 缓存 的 资源 文件 名 称 ， 浏 览 器 会 
自动 将 这 些 资源 文件 缓存 在 本 地 。 

(5) 在 线 缓存 资源 归属 于 NETWORK 类 型 。 这 些 资 源 文件 在 客户 端 与 服务 器 建立 连接 时 才 
能 访问 ， 如 果 没 有 在 线 缓存 的 资源 ， 则 可 以 使 用 通配符 “*”。 

(6) 替代 资源 文件 归属 于 FALLBACK 类 型 ， 每 行列 出 两 个 资源 文件 名 称 ， 第 一 个 资源 文件 
用 于 在 线 访问 时 使 用 ， 第 二 个 资源 文件 用 于 离线 访问 时 使 用 。 

(7) CACHE、NETWORK 和 FALLBACK 类 型 都 是 可 选 类 型 ， 如 果 文 件 开头 没有 指定 资源 
文件 类 型 ， 浏 览 器 默认 将 其 视 为 CACHE 类 型 进行 解析 ， 直 到 遇见 第 一 个 可 以 解析 的 类 型 为 止 。 

(8) 一 个 文件 中 可 以 出 现 多 个 CACHE 类 型 。 


11.3.5 ”在线 状态 监测 


对 于 静态 页 面 而 言 ， 通 过 离线 资源 缓存 即 可 支持 离线 访问 ， 但 是 对 于 可 交互 的 动态 网 页 而 言 ， 
要 实现 离线 应 用 功能 ， 就 需要 知道 当前 浏览 器 是 否 在 线 。 如 果 在 线 , 用 户 提交 的 数据 就 可 以 直接 保 
存在 服务 器 上 ， 如 果 离线 ， 就 可 以 将 数据 保存 在 本 地 ， 待 在 线 后 ， 再 把 数据 同步 到 服务 器 上 。 

在 HTML5 中 ， 可 以 通过 navigator.onLine 属性 检测 当前 浏览 器 是 否 在 线 。 如 果 返 回 tue， 则 
表示 浏览 器 在 线 ， 如 果 返 回 false， 则 表示 浏览 器 离线 。 当 浏览 器 在 线 和 离线 状态 进行 转换 时 ， 
navigator.onLine 属性 的 值 也 会 发 生 相 应 的 变化 。 

在 开发 离线 应 用 时 ， 不 仅 需要 获取 当前 网 络 状态 ， 还 需要 在 网 络 状 态 发 生变 化 时 触发 online 
或 offline 事件 ， 通 知 用 户 当前 网 络 状态 的 变化 。online 和 offine 事件 将 触发 在 body 元 素 上 ， 并 沿 
着 document.body、document 和 window 的 顺序 依次 向 上 传递 。 


11.3.6 ”实例 : 创建 离线 应 用 


通过 对 以 上 内 容 的 学 习 , 我 们 已 经 掌握 了 HIMLS 离线 应 用 的 创建 方法 , 下 面 将 通过 一 个 简单 
的 案例 来 详细 介绍 创建 离线 应 用 时 需要 注意 的 各 个 方面 。 首 先 我 们 来 看 Web 页 面 的 HTML 代码 : 


<!doctype html> 
<html manifest="index.appcache"> 
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<head> 
<meta charset="utf-8"> 
<title>11.3.1</title> 
<script language="javascript" src="index.js"></script> 
</head> 
<body> 
<img id="myImage" width="300" height="180" src="MyImage.png" /> 
<hr> 
<input type="button" onClick="Show();”value=" 监 测 浏览 器 状态 ”/><h2 id="msg"> 
</h2> 
<hr> 
<h2> 替 代 资 源 <img id="FallBackImg" width="20" height="20" 
Src="ImgonLine .png"/></h2> 
</body> 
</html> 


在 这 段 代码 中 ， 我 们 首先 给 页 面 引入 一 个 名 为 “index.appcache ”的 Cache Mainfest 文件 ， 然 
后 引入 一 个 名 为 “indexjs” 的 JavaScript 文件 。 页面 主体 的 顶端 是 一 张 id 名 为 “myImage” 的 图 片 ， 
图 片 下 面 是 一 条 分 割 线 , 分 割 线 下 面 是 一 个 按钮 ， 通过 单 击 该 按钮 ,显示 应 用 当前 是 否 在 线 的 提示 
信息 ， 最 下 面 是 一 条 提示 信息 ， 用 于 显示 替代 资源 效果 。 这 个 页 面 的 初始 效果 如 下 图 所 示 。 


回 ide 
€ 3 © | localhost/9/indexhtml 


EL 


蔡 代 资源 鲁 


接 下 来 ， 我 们 编写 ndex.appcache 文件 的 代码 。 
CACHE MANIFEST 

# VERSION v1.0 

CACHE: 

MyImage .png 

index.js 

ImgoffLine.png 


NETWORK : 
大 
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FALLBACK: 
ImgonLine.png ImgoffLine.png 


文件 第 一 行 是 Cache Mainfest 文件 的 标准 写法 ， 第 二 行 是 注释 信息 ， 用 于 描述 该 文件 的 版 本 ， 
第 三 行 用 于 标注 CACHE 类 型 资源 ,在 该 文件 中 ， 只 缓存 MyImage.png、indexjs 和 ImgOffLine.png 
三 个 文件 。 接 下 来 是 NETWORK 类 型 文件 ， 这 里 用 “*” 通 配 所 有 文件 。 在 FALLBACK 类 型 文件 
中 ， 我 们 用 ImgOffLine.png 替代 ImgOnLine.png 文件 。 
在 indexjs 文件 中 ， 我 们 为 按钮 编写 相应 的 脚本 文件 ， 代 码 如 下 : 
function Show() 
{ 
Var msg=document .getElementBYId("msg") 7 
if(navigator.onLine){ 
msg.innerHTML=" 在 线 <img id='state' width='20' height="'20' 
src='ImgOonLine.png'/>"; 
J}elsef{ 
msg.innerHTML=" 离 线 <img id='state' width='20' height="'20' 
src='ImgOffLine.png'/>"; 
} 
} 


在 这 段 脚本 文件 中 ，navigator.onLine 用 于 检测 浏览 器 是 否 在 线 。 如 果 在 线 ， 则 为 img 文件 指 
定 一 张 绿色 的 在 线 图 片 ， 如 果 离线 ， 则 为 img 文件 指定 一 张 红 色 的 离线 图 片 。 
至 此 ， 本 案例 所 有 的 代码 已 经 编写 完成 ， 接 下 来 按照 以 下 步骤 进行 测试 。 


(1) 在 线 浏 览 。 确 保 浏览 器 在 线 的 情况 下 浏览 页 面 ， 并 单 击 按钮 进行 测试 。 按 F12 键 打开 开 
发 者 工具 ,选择 Resources 选项 卡 , 然后 依次 展开 左边 的 Application Cache 节点 , 效果 如 下 图 所 示 。 


ide x 
而 Bi Dlocalhost/3/indexhtm 


检测 结果 是 浏览 器 在 线 并 显示 绿色 图 标 , 同时 蔡 代 资源 也 显示 绿色 图 标 。 在 Application Cache 
节点 中 可 以 看 到 ， 浏 览 器 已 经 根据 index.appcache 的 设置 缓存 了 各 个 文件 ， 而 且 开 发 者 工具 窗口 底 
端 显示 online 在 线 。 
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(2) 离线 浏览 。 断 开 网 络 连接 ， 按 F5 键 刷新 页 面 ， 单 击 测试 按钮 进行 测试 ， 效 果 如 下 图 
所 示 。 


匡 


QQ 日 Bemeng Nowark Sourer Timeine proalec [RE Aodie Concle 汪 所 口 ,x 


3 
离线 是 


蔡 代 资源 ®@ 
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检测 结果 是 浏览 器 离线 并 显示 红色 图 标 ,说 明 index.js 文件 已 经 缓存 成 功 。 页 面 顶 端的 图 片 因 
为 离线 缓存 也 能 够 正常 浏览 ， 开 发 者 工具 窗口 底 端 显示 offline 离线 ， 说 明 浏览 器 已 经 处 于 离线 状 
态 ， 但 是 蔡 代 资源 依然 显示 为 绿色 图 标 ， 这 与 我 们 期 待 的 不 符 。 

(3) 移 除 资 源 文件 。 因 为 我 们 在 一 台 计算 机 上 进行 测试 ， 这 台 计 算 机 既 作为 服务 端 又 作为 客 
户 端 ,所 以 我 们 无 法 判断 浏览 器 的 蔡 代 资源 是 否 有 效 , 需要 在 本 地 目录 下 移 除 ImgOnLine.png 文件 ， 
以 确保 本 地 确实 不 存在 该 文件 ， 然 后 刷新 页 面 ， 效 果 如 下 图 所 示 。 


家 | 三 
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由 此 可 知 ， 在 离线 状态 下 ， 浏 览 器 没有 缓存 IngOnLinepng 文件 ， 所 以 使 用 蔡 代 资源 
ImgOffLine.png 蔡 代 了 该 文件 。 


第 11 章 本 地 存储 与 离线 应 用 | 181 


测试 题 


(1) Web Storage 分 为 哪 两 种 ? 哪 种 可 用 于 持久 保存 数据 ? 

(2) 如 何 检测 浏览 器 是 否 支持 HIMLS 的 Web Storage 功能 ? 
(3) 如 何 使 用 Web Storage 存 入 和 读 取 数据 ? 

(4) 在 HIML5 中 Cache Mainfest 文件 的 第 一 行 必须 是 什么 ? 
(5) HTML5 中 规定 Cache Mainfest 文件 的 MIME 类 型 是 什么 ? 
(6) HTMLS5 离线 缓存 应 用 中 如 何 检测 浏览 器 是 否 在 线 ? 


11.4 ”本 章 小 结 


本 章 主要 介绍 了 HTML5 中 本 地 存储 和 离线 应 用 。 通 过 本 章 的 学 习 ， 读 者 应 该 熟练 掌握 Web 
Storage 存 入 和 读 取 数据 的 方法 ， 并 能 清除 不 需要 的 本 地 存储 数据 。 在 使 用 HTMLS5 的 离线 应 用 时 ， 
必须 对 服务 器 的 MIME 类 型 进行 设置 ， 确 保 离线 应 用 的 功能 。 要 熟练 掌握 Cache Mainfest 文件 的 
编写 方法 ， 以 及 离线 应 用 在 线 监测 的 使 用 方法 。 


Communication API 


HIML5 提供 了 在 网 页 文档 之 间 互 相 接收 与 发 送信 息 的 功能 ， 是 由 Communication API 提供 。 
使 用 该 功能 ， 可 以 根据 网 页 窗口 对 象 的 实例 ， 实 现 跨 文 档 消息 通信 。 而 XML HttpRequest 的 升级 版 
实现 了 跨 源 XML HttpRequest 和 进度 事件 功能 。 本 章 将 详细 介绍 这 些 功 能 的 使 用 方法 。 


12.1 认识 Communication API 


跨 文本 消息 通信 (Cross Document Messaging) 和 XML HttpRequestLevel 2 是 构成 实时 跨 源 通 
信 的 两 个 模块 ， 也 是 本 章 将 要 介绍 的 Communication API。 通 过 Communication API， 无 论 是 同 域 
还 是 不 同 域 ， 都 可 以 创建 安全 通信 的 Web 应 用 。 


12.1.1 Communication API 简介 


通信 (Communication) API 是 HIML5 中 用 来 实现 正在 运行 的 两 个 页 面 之 间 进 行 通信 和 信息 
共享 的 API， 在 开发 Web 应 用 程序 时 ， 其 主要 功能 就 是 实现 应 用 程序 进程 之 间 的 通信 。 例 如 A 页 
面 要 将 一 段 信息 发 送 给 B 页 面 ， 待 B 页 面 接收 到 信息 后 ， 这 个 通信 的 过 程 就 算 完成 了 。 在 这 个 通 
信 过 程 中 ， 即 使 A 页 面 和 B 页 面 处 于 不 同 的 域 ， 也 可 以 完成 通信 。 


12.1.2 ” Communication API 运行 流程 


正如 上 面 的 举例 ，Communication API 的 运行 流程 就 是 一 个 完整 的 通信 过 程 。 首 先 ， 我 们 将 发 
送 消息 的 页 面 称 为 Host Page， 接 收 消息 的 页 面 称 为 Client Page。 其 次 ， 消 息 由 Host Page 发 出 ,发 
送 的 方式 有 两 种 : 第 一 种 称 为 指定 目标 发 送 ， 即 消息 发 送 给 确定 的 Client Page 页 面 ; 第 二 种 称 为 
广播 发 送 消息 ， 即 消息 发 送 给 所 有 的 Client Page 页 面 。Host Page 页 面 发 送 消息 后 ，Client Page 页 
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面 可 以 接收 相同 协议 的 Host Page 页 面 发 送 过 来 的 消息 ,并且 在 Client Page 页 面 中 有 一 个 权限 验证 
的 过 程 ， 用 于 验证 消息 来 源 是 否 可 信 。 


通常 情况 下 都 会 使 用 指定 目标 发 送 ， 而 不 使 用 广播 发 送 。 
提 示 
12.1.3 Communication API 的 基本 用 法 


消息 通信 的 传递 过 程 主要 分 为 三 步 : 第 一 步 是 发 送 消息 ;第 二 步 是 权限 验证 ， 第 三 步 是 接收 
(1) 发 送 消 息 : 发 送 消息 时 ， 使 用 window 对 象 的 postMessage 方法 向 其 他 窗口 发 送 消息 。 该 
方法 的 定义 如 下 : 


hostwindow.postMessage (message,ClientPage); 


该 方法 有 两 个 参数 : 第 一 个 参数 message 表示 要 发 送 的 信息 文本 ， 第 二 个 参数 ClientPage 表示 
接收 消息 窗口 的 URL 地 址 ， 如 http://localhost/10/Client.html。 如 果 ClientPage 使 用 通配符 “*”， 则 
表示 全 部 地 址 ， 不 建议 使 用 。hostwindow 是 发 送 消息 的 窗口 对 象 引用 ， 可 以 通过 window.open 返回 
该 对 象 ， 或 者 通过 对 window.frames 数组 指定 序号 或 名 字 来 返回 单个 frame 所 属 的 窗口 对 象 。 

(2) 权限 验证 : 通过 对 window 对 象 的 message 事件 进行 监听 ， 访 问 message 事件 的 origin 
属性 ， 可 以 获取 消息 的 发 送 源 。 只 有 确认 了 发 送 源 可 信 才 能 接收 消息 。 这 里 需要 注意 的 是 ， 发 送 源 
只 包括 域名 和 端口 。 

(3) 接收 消息 : 通过 访问 message 事件 的 data 属性 , 可 以 获取 消息 的 内 容 ; 通过 访问 message 
事件 的 source 属性 ， 可 以 获取 消息 发 送 源 的 窗口 对 象 。 


12.2” 跨 文档 消息 通信 详解 


由 于 Web 页 面 的 多 样 性 ， 因 此 同一 浏览 器 中 可 能 会 出 现 多 个 标签 页 或 窗口 ， 同 一 个 网 页 中 也 
可 能 会 嵌 套 多 个 页 面 框架 , 这 些 页 面 之 间 的 通信 问题 因为 安全 原因 一 直 受到 严格 限制 。 跨 文档 消息 
通信 的 出 现 ， 可 以 让 这 些 页 面 安 全 地 实现 消息 通信 。 


12.2.1 源 安全 简介 


HTMLS5 通过 引入 源 的 概念 对 域 安全 进行 了 阐明 和 改进 。 源 是 网 络 上 用 来 建立 信任 关系 的 地 址 
的 子 集 。 源 由 规则 (scheme) 、 主 机 (host) 、 端 口 (port) 组 成 ， 如 由 于 scheme (https、http) 
不 同 ， 因 此 源 也 不 同 。 

跨 源 通信 通过 源 来 确定 发 送 者 ， 这 就 使 得 接收 方 可 以 忽略 或 者 拒绝 来 自 不 可 信 源 的 消息 。 同 
时 需要 通过 添加 监听 事件 来 接收 消息 , 以 避免 被 不 可 信 应 用 程序 的 信息 所 干扰 .但 是 在 使 用 外 来 消 
息 时 ， 即 便 是 可 靠 的 数据 源 ， 也 同样 需要 谨慎 ， 以 防止 内 容 注入 。 
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12.2.2 ”postMessage API 基本 用 法 


在 使 用 postMessage API 时 ， 需 要 遵循 以 下 步骤 。 


(1) 检查 浏览 器 是 否 支持 。 虽 然 目前 很 多 浏览 器 都 支持 HTML5 的 Communication API, 但 是 
在 使 用 postMessage API 时 仍 需要 检查 浏览 器 是 否 支 持 。 如 果 浏 览 器 的 window.postMessage 类 型 未 
被 定义 ， 则 可 以 判断 该 浏览 器 不 支持 postMessage。 
if(typeof window.postMessage === undefined){ 


// 浏 览 器 不 支持 PostMessage 
} 


(2) 发 送 消 息 。 使 用 window 窗口 对 象 的 postMessage 方法 可 以 给 指定 目标 发 送 消息 ,也 可 以 
给 所 有 页 面 广播 消息 ， 但 不 建议 使 用 广播 消息 。postMessage 方法 的 第 一 个 参数 是 要 发 送 的 消息 文本 
信息 ， 第 二 个 参数 是 接收 消息 窗口 的 URL 地 址 ， 这 个 URL 地 址 的 域 和 发 送 消息 窗口 的 域 可 以 不 同 。 
(3) 监听 消息 事件 。 通 过 window 对 象 的 message 事件 添加 监听 ， 访 问 message 对 象 的 origin 
属性 获取 消息 发 送 源 的 域 ， 如 果 该 域 可 信 ， 则 通过 message 对 象 的 data 属性 接收 消息 ， 否 则 忽略 。 


12.2.3 ”实例 : 使 用 postMessage API 创建 应 用 


本 例 将 通过 一 个 主页 面 和 子 页 面 之 间 的 通信 来 演示 跨 文档 消息 传输 的 过 程 。 首 先 ， 主 页 面 中 
有 一 个 fame 子 页面 ， 通 过 单 击 子 页 面 中 的 按钮 ， 将 子 页 面 中 文本 框 输入 的 信息 传送 给 主页 面 ， 
主页 面 接收 到 信息 后 将 其 显示 在 页 面 中 。 为 了 演示 跨 域 通信 ， 我 们 将 主页 面 端 口 设置 为 8080， 子 
页 面 端口 设置 为 8081。 

先 来 看 一 下 主页 面 中 的 代码 。 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>12.2.1</title> 

<script language="javascript"> 

window.onload=function init() 


{ 


if(typeof window.postMessage === undefined){ 
alert ("该 浏览 器 不 支持 postMessage"); 
return; 


window.addEventListener ("message", function(ev){ 
if (ev.origin!="http://localhost:8081"){ 
return; 
} 
document .getElementById ("receiveMsg") .innerHTML=" 来 自 
"+ev.origin+" 的 消息 : "+ev.data; 
},.false); 
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} 

</script> 

</head> 

<body> 
<iframe width="400" src="http://localhost:8081/" ></iframe> 
<h2 id="receiveMsg"></h2> 

</body> 

</html> 


在 这 段 代码 中 ， 页 面 主体 部 分 是 一 个 过 ame， 用 于 显示 子 页 面 ;<h2> 元 素 用 于 显示 从 子 页 面 
发 送 过 来 的 信息 。 当 主页 面 加 载 后 ， 我 们 先 来 检测 当前 浏览 器 是 否 支持 postMessage， 如 果 不 支持 ， 
则 弹出 提示 信息 并 返回 ， 如 果 支 持 ， 则 通过 window 对 象 的 message 事件 添加 监听 。 通 过 message 
事件 的 origin 属性 判断 消息 来 源 是 否 为 子 页 面 〈http://localhost:8081) ， 如 果 不 是 ， 则 忽略 消息 ; 
如 果 消 息 确 实 来 源 于 子 页 面 ， 那 么 将 通过 message 事件 的 data 属性 获取 消息 ， 并 显示 在 主页 面 的 
<h2> 元 素 中 。 

接 下 来 看 一 下 子 页 面 中 的 代码 。 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>12.2.2</title> 

<script language="javascript"> 

function sendMessage() 


{ 


Var msg=document .getElementById("sendInfo") .value; 
top.postMessage (msg, "http://localhost:8080"); 

} 

</script> 

</head> 

<body> 

<input type="text" id="sendInfo" /> 

<input type="button" id="btnSend" value="send" onClick="sendMessage()" /> 

</body> 

</html> 


在 这 段 代码 中 ， 文 本 框 用 于 接收 用 户 输入 的 信息 ， 单 击 按钮 后 ， 通 过 当前 窗口 对 象 将 用 户 输 
入 的 信息 发 送 到 主页 面 (http://localhost:8080) 。 
[六 主页 面 和 和 子 页 面 虽然 都 是 本 地 URL 地 址 , 但 是 它们 的 端口 号 不 一 样 , 属于 不 同 的 域 。 
注意 

本 实例 演示 的 效果 如 下 图 所 示 。 
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来 自 attp://localhost:8081 的 消息 : 测试 消息 


12.3 XMLHttpRequest Level 2 


XMLHttp 是 一 套 可 以 在 Javascript、VbScript、Jscript 等 脚本 语言 中 通过 http 协议 传送 或 者 接 
收 XML 及 其 他 数据 的 一 套 API。 简 而 言 之 ，XMLHttpRequest 可 以 实现 Ajax 技术 ， 在 不 刷新 整个 
页 面 的 情况 下 更 新 布局 页 面 内 容 。XMLHttpRequest Level 2 是 XMLHttpRequest 的 新 版 本 ， 本 节 将 
主要 介绍 新 版 本 的 一 些 功能 。 


12.3.1 ” 跨 源 XMLHttpRequest 


旧版 本 的 XMLHttpRequest 受到 同 域 限制 ， 只 能 向 同一 域名 的 服务 器 请 求 数据 ， 而 新 版 本 的 
XMLHttpRequest 对 象 , 可 以 向 不 同 域名 的 服务 器 发 出 HITP 请 求 .通过 CORS( Cross-origin resource 
sharing， 跨 域 资 源 共享 ) 实现 了 跨 源 XMLHttpRequest。 服 务 器 端 对 于 CORS 的 支持 ， 主 要 是 通过 
设置 Access-Control-Allow-Origin 来 进行 的 。 如 果 浏 览 器 检测 到 相应 的 设置 ， 就 会 允许 跨 域 访问 。 
在 Apache 服务 器 中 ， 需 要 使 用 mod_headers 模块 激活 HITP 头 的 设置 ， 默 认 是 激活 的 。 用 户 只 需 
要 在 Apache 配置 文件 的 <Directory> <Location> <Files> 或 <VirtualHost> 配 置 里 加 入 以 下 内 容 即 可 。 

Header set Access-Control-Allow-Origin * 

首先 创建 一 个 XMLHttpRequest 的 实例 ， 然 后 向 远程 主机 发 送 一 个 HTTP 请 求 。 代 码 如 下 : 

Var xhr = new XMLHttpRequest (); 


xhr.open ("POST", "http://localhost:8081"); 
xhr.send(); 


在 使 用 “ 跨 域 资源 共享 ”之 前 ， 首 先 需 要 确认 浏览 器 支持 此 功能 ， 而 且 服 务 器 端 必须 同意 这 
种 “ 跨 域 ”。 目 前 大 部 分 浏览 器 和 部 分 浏览 器 较 高 的 版 本 都 支持 此 功能 。 


12.3.2 ”HTTP 请 求 时 限 


虽然 Ajax 技术 的 用 户 体验 效果 非常 好 ， 但 如 果 数据 量 比较 大 或 网 速 比较 慢 ，Aijax 操作 就 会 耗 
费 很 长 时 间 。 在 新 版 的 XMLHttpRequest 对 象 中 ， 新 增加 了 timeout 属性 ， 用 于 设置 HITP 的 请 求 
时 间 ， 请 求 超过 设置 的 时 间 后 将 自动 停止。 


xhr.timeout = 30007 
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上 面 这 段 代码 设置 了 超时 时 限 为 3000 毫秒 ， 若 过 了 这 个 时 限 ， 则 HITP 请 求 将 自动 停止 。 此 
时 可 以 使 用 timeout 事件 指定 回调 函数 ， 处 理 超时 后 的 其 他 操作 。 代 码 如 下 。 
xhr.ontimeout = function (event)1{ 


alert (" 请 求 超时 ! ") 


} 
12.3.3 “FormData 对 象 


FormData 是 XMLHttpRequest 新 版 本 中 添加 的 一 个 对 象 , 我 们 可 以 通过 JavaScript 用 一 些 键 值 
对 来 模拟 一 系列 表单 控件 ， 还 可 以 使 用 XMLHttpRequest 的 send() 方 法 来 异步 提交 表单 。 使 用 
FormData 对 象 的 append0 方 法 可 以 向 该 对 象 中 添加 各 种 类 型 的 数据 。 

创建 一 个 FormData 对 象 。 

var fmData=new FormData(); 

添加 字符 串 和 整 型 数据 ， 整 型 数据 会 以 字符 串 形式 保存 。 

fmData.append ("username", "Sean"); 

fmData.append ("phonenum",13655554444); 

添加 File 类 型 数据 。 

<input type="file" id="inputfile" multiple /> 

Var file=document .getElementById("inputfile").files[0]; 

fmData.append ("inputfile", file); 

添加 Blob 类 型 数据 。 

Var strBlob="this is a blob object."; 

Var oBlob=new Blob ([strBlob], {type:"text/xml"}); 

fmData.append ("webBlob", oBlob); 


如 果 一 个 表单 中 的 数据 非常 多 ， 就 可 以 使 用 这 个 表单 直接 初始 化 FormData 对 象 ， 只 需要 将 这 
个 form 元 素 作为 参数 传 入 FormData 对 象 的 构造 函数 即 可 。 代 码 如 下 : 

Var myForm=document .getElementById ("myForm"); 

Var oReq=new XMLHttpRequest (); 

oReq.open ("POST", "http://localhost:8081"); 

oReq.send (new FormData (myForm)); 


另外 ， 通 过 使 用 HTTP 表单 初始 化 FormData 对 象 时 ， 还 可 以 继续 使 用 append() 方 法 向 其 中 添 
加 新 的 键 值 对 ， 然 后 通过 send0 方 法 发 出 。 


12.3.4 ”上 传 文件 


如 果 FormData 对 象 中 包含 File 类 型 的 文件 , 那么 在 发 送 时 可 以 将 这 些 文件 上 传 。 例如 在 Form 
表单 中 有 一 个 文本 输入 框 ， 代 码 如 下 : 


<form enctype="multipart/form-data" method="post" name="fileinfo"> 
<input type="file" name="file" required /> 

</form> 

<div id="msg"></div> 
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通过 HTML 表单 直接 初始 化 一 个 FormData 对 象 ， 这 样 FromData 对 象 中 就 包含 了 文件 数据 。 
然后 新 建 一 个 XMLHttpRequest 对 象 , 使 用 open0 方 法 打开 发 送 地 址 , 在 onload 事件 指定 回调 函数 ， 
并 通过 XMLHttpRequest 对 象 的 status 属性 值 监听 文件 是 否 上 传 结 束 。 相 关 代 码 如 下 : 
var msg=document .getElementById ("msg"); 
Var fData=new FormData (document.forms.item("fileinfo")); 
Var oReq=new XMLHttpRequest (); 
oReq.open ("POST", "http://localhost:8081", true); 
oReq.onload=function (ev) { 
if (oReq.status==200){ 
msg.innerHTML=" 文 件 已 上 传 "; 
} else { 
msg .innerHTML=" 文 件 上 传 失 败 ， 错 误 : "+oReq.status; 


} 
}; 
oReq.send (fData); 


C7 open() 方 法 的 第 三 个 参数 true 表示 异步 执行 。 
注 意 


12.3.5 ”接收 二 进 制 数 据 


旧版 本 的 XMLHttpRequest 对 象 只 能 从 服务 器 获取 文本 数据 ， 而 新 版 本 的 XMLHttpRequest 对 
象 则 可 以 从 服务 器 获取 二 进 制 数据 。 关 于 接收 二 进 制 数据 的 方法 有 两 种 : 一 种 是 改写 MIMEType; 
另外 一 种 是 使 用 responseType 属性 。 


1. 改写 MIMEType 

这 是 一 种 早期 的 接收 二 进 制 数据 的 方法 ， 通 过 改写 MIMEType 将 服务 器 返回 的 二 进 制 数据 伪 
装 成 文本 数据 ， 并 且 告诉 浏览 器 这 是 用 户 自 定义 的 字符 集 。 

xhr.overrideMimeType("text/plain:charset=x-user-defined"); 

完成 必要 的 伪装 之 后 ， 就 可 以 使 用 responseText 属性 接收 服务 器 返回 的 二 进 制 数据 。 

Var strBit=xhr.responseText; 

因为 此 时 浏览 器 已 经 将 这 些 二 进 制 数据 视 为 文本 数据 ， 所 以 必须 再 逐个 字 节 地 还 原 成 二 进 制 
数据 ， 才 能 在 页 面 上 显示 出 来 。 这 种 做 法 目前 已 不 再 推荐 使 用 ， 只 需 了 解 即 可 。 

2. responseType 属性 

XMLHttpRequest 新 版 本 中 增加 了 responseType 属性 ， 用 于 设置 服务 器 返回 数据 的 类 型 。 如 果 


服务 器 返回 文本 数据 ， 那 么 这 个 属性 的 值 将 是 “TEXT”， 也 是 默认 值 。 如 果 把 responseType 属性 
值 设置 为 blob， 则 表示 服务 器 传 回 的 是 二 进 制 对 象 。 


Var xhr=new XMLHttpRequest () 7 
Xhr.open("GET", "http://localhost:8081/images/bg.png"); 
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xhr.responseType="blob"; 
Var blob=new Blob([xhr.response], {type:"image/png"}); 


这 里 需要 注意 的 是 ， 在 接收 Blob 对 象 时 ， 使 用 xhr.response 而 不 是 xhr.responseType。 


12.3.6 ”进度 信息 


新 版 本 的 XMLHttpRequest 对 象 在 传送 数据 时 ， 有 一 个 progress 事件 ， 用 来 返回 进度 信息 。 这 
个 progress 事件 又 分 成 上 传 和 下 载 两 种 情况 ， 下 载 的 progress 事件 属于 XMLHttpRequest 对 象 ， 上 
传 的 progress 事件 属于 XMLHttpRequestupload 对 象 。 为 progress 事件 指定 回调 函数 ， 在 回调 函数 
中 使 用 eventlenthComptable 属性 判断 传输 状态 , 使 用 event.total 属性 获取 需要 传输 的 总 字 节 , 使 用 
event.loaded 属性 获取 已 经 传输 的 字 节 。 相 关 代码 如 下 : 

function updateProgress (ev){ 


if(ev.lengthComputable){ 
Var percentCompete=ev.1loaded/ev.total; 


} 
. 


xhr.onprogress=updateProgress; 
xhr.upload.onprogress=updateProgress; 


另外 ， 还 有 其 他 5 个 事件 与 progress 事件 相关 ， 可 以 分 别 为 其 指定 回调 函数 做 相应 的 处 理 。 


(1) load 事件 ， 传输 成 功 完成 。 

(2) abort 事件 :传输 被 用 户 取 消 。 

(3) error 事件 : 传输 中 出 现 错 误 。 

(4) loadstart 事件 ， 传 输 开始 。 

(5) loadEnd 事件 ， 传 输 结束 ， 但 不 知道 是 否 成 功 。 


12.3.7 ”实例 : 创建 XMLHttpRequest 应 用 
在 上 传 文件 的 过 程 中 ， 根 据 文件 上 传 进度 显示 进度 百分比 ， 实 现实 时 更 新 Ajax 效果 。 另 外 ， 
本 例 上 传 文件 的 页 面 与 接收 文件 的 页 面 分 别 属于 两 个 不 同 的 域 。 有 具体 实现 步骤 如 下 : 
(1) 使 用 Apache 服务 器 ， 首 先 找到 Apache 安装 目录 下 的 apache\conf\ httpd.conf 文件 ， 在 
Directory 节点 中 添加 以 下 代码 ， 指 定 可 信任 的 域名 。 
Header set Access-Control-Allow-Origin * 
(2) 利用 记事 本 打开 C:\Windows\System32\drivers\etc\hosts 文件 ,在 该 文件 底部 添加 以 下 代码 : 


127.0.0.1 www.a.com 

127.0.0.1 www.b.com 

(3) 利用 记事 本 编辑 Apache 安装 目录 下 的 apache\conf\httpd.conf， 在 顶部 添加 需要 被 监听 的 
端口 : 8080 和 8081， 保 留 默 认 监听 的 80 端口 。 
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Listen 80 
Listen 8080 
Listen 8081 


(4) 为 8080 端口 和 8081 端口 分 别 配 置 虚拟 主机 。 同 样 编辑 apache\conf\httpd.conf 文件 ， 在 
该 文件 底部 添加 以 下 代码 。 
<virtualhost *:8080> 
ServerName localhost 
DocumentRoot C:\xampp\htdocs\1l0\a 
</virtualhost> 
<virtualhost *:8081> 
ServerName localhost 
DocumentRoot C:\xampp\htdocs\10\b 
</virtualhost> 


(5) 现在 我 们 已 经 完成 了 同一 服务 器 上 两 个 不 同 域 的 配置 ， 并 指定 所 有 域名 可 信 。 
(6) 将 上 传 页 面 设置 到 8080 端口 。 上 传 页 面 UploadFile.html 的 编码 如 下 : 


<!doctype html> 
<head> 
<meta charset="utf-8"> 
<title>12.3.1</title> 
<script type="text/javascript"> 
function fileSelected() { 
var file = document .getElementById("fileToUpload") .files[0]; 
EE Eile), 区 
Var fileSize = 0; 
if (file.size > 1024 * "1024) 
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 
100) .tostring() + "MB"; 
else 
fileSize = (Math.round (file.size * 100 / 1024) / 100) .toString() 
ai ta 
document .getElementBYId("fileName") .innerHTML = "<h2> 文 件 名 称 ; " + 
file.name+"</h2>"7 
document .getElementById("fileSize") .innerHTML = "<h2> 文 件 大 小 : " + 
fileSsizet"</h2>"; 
| 
} 
function uploadFile() { 
Var fd = new FormData(); 
fd.append ("fileToUpload", 
document .getElementById("fileToUpload") .files[0]); 
Var xhr = new XMLHttpRequest (); 
xhr.timeout=3000; 


xhr.upload.addEventListener ("progress", uploadProgress, false); 
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xhr.addqdEventListener ("load", uploadComplete, false); 
xhr.addEventListener ("error", uploadFailed, false); 
xhr.ontimeout = function(event){ 
document .getElementById ("progressNumber") .innerHTML ="<h2> 上 传 
失败 ， 请 求 超时 ! </h2>"; 
| 
xhr.open ("POST", "http://localhost:8081"); 
xhr.send (fd); 
} 
function uploadProgress(evt) { 
if (evt.lengthComputable) { 
Var percentComplete = Math.round(evt.loaded * 100 / evt.total); 
document .getElementById ("progressNumber") .innerHTML ="<h2> 已 完成 :" 
+ percentComplete.tostring() + "%</h2>"; 
} 
esa 
document .getElementById ("progressNumber") .innerHTML = "<h2> 上 传 失败 ! 
</h2>"; 


} 
function UploadComplete (evt) { 
if(evt.target.statusText=="OK") { 
document .getElementById ("progressNumber") .innerHTML+="<h2> 上 
传 成 功 ! </h2><h2> 上 传 地 址 : </2>"+evt .target .responseURL; 
}elsef{f 
document .getElementById ("progressNumber") .innerHTML="<h2> 上 传 
失败 !</h2>"; 


} 
function uploadFailed(evt) { 
document .getElementById ("progressNumber") .innerHTML="<h2> 上 传 失败 ! 
</h2>"? 
} 
</script> 
</head> 
<body> 
<form id="forml" enctype="multipart/form-data" > 
<div class="row"> 
<label for="fileToUpload"> 选 择 上 传 文件 </label> 
<input type="file" name="fileToUpload" id="fileToUpload" 
onchange="fileSelected();"/> 
</div> 
<div id="fileName"></div> 
<div id="fileSize"></div> 


<div id="fileType"></div> 
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<div class="row"> 

<input type="button"” onclick="uploadFile()"” value=" 开 始 上 传 ”/> 
</div> 

<div id="progressNumber"></div> 

</form> 

</body> 

</html> 


在 这 段 代码 中 ，HTML 页 面 上 有 两 个 按钮 : 一 个 用 于 选择 文件 ， 一 个 用 于 上 传 文件 。 在 选择 
文件 时 , 通过 函数 fleSelectedO 获 取 文件 的 名 称 和 大 小 ,并 显示 在 <h2> 元 素 中 。 在 单 击 “ 开 始 上 传 ” 
按钮 时 ， 和 触发 uploadFile0 函 数 ， 获 取 上 传 的 文件 ， 然 后 创建 一 个 XMLHttpRequest 对 象 ， 设 置 时 限 
为 3000 毫秒 , 同时 监听 progress load 和 error 三 个 事件 ,在 监听 progress 事件 时 执行 uploadProgress() 
函数 ， 实 时 显示 文件 上 传 进度 ， 在 监听 load 事件 时 执行 uploadComplete0 函 数 ， 显 示 文件 上 传 结果 
和 文件 上 传 地 址 ; 在 监听 error 事件 时 执行 uploadFailedO 函 数 , 显示 文件 上 传 错误 提示 。 最 后 以 POST 
方式 将 文件 上 传 至 页 面 http://localhost:8081。 

(7) 将 接收 页 面 设置 到 8081 端口 ， 接 收 页 面 暂时 不 需要 编写 任何 代码 ， 页 面 名 称 默认 为 
index.html。 

(8) 在 Chrome 浏览 器 中 打开 文件 上 传 页 面 http://localhost:8080/UploadFile.html， 选 择 一 个 要 
上 传 的 文件 ， 效 果 如 下 图 所 示 。 


文件 大 小 : 695. 22MB 
aig 


(9) 单 击 “ 开 始 上 传 ”按钮 后 ， 按 钮 下 面 出 现 上 传 进度 ， 如 下 图 所 示 。 由 于 我 们 选择 的 文件 
比较 大 ， 没 能 在 3000 毫秒 内 完成 上 传 ， 所 以 出 现 了 超时 ， 如 下 图 所 示 。 


起 汪 上 传 实 件 【ae 
文件 名 称 : abcTest. iso 
文件 大 小 : 695. 22MB 
[BE 


已 完成 : 上 
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才 权 上 从 文 作 [| scesao 
文件 名 称 : abcTest. iso 
文件 大 小 : 695. 22MB 


[BE 


上 传 失败 ， 请 求 超时 1 


(10) 重新 选择 一 个 较 小 的 文件 再 次 上 传 ， 这 次 上 传 成 功 了 ， 同 时 显示 上 传 地 址 ， 如 下 图 所 示 。 


Fr 

上 全 a 

文件 名 称 : abcTest2. zip 
文件 大 小 : 1. 09MB 
ET 

已 完成 : 100% 


上 传 成 功 ! 
上 传 地 址 : http://localhost:8081/ 


测试 题 


(1) HTML5 中 ， 使 用 postMessage API 需要 遵循 哪 几 个 步 又 ? 

(2) 在 跨 文 档 消息 通信 中 可 以 使 用 message 对 象 的 什么 属性 来 获取 发 送 源 ? 
(3) XMLHttpRequest 如 何 设置 请 求 超时 ? 

(4) 如 何 通过 表单 创建 FormData 对 象 ? 

(5) XMLHttpRequest 对 象 在 传输 数据 时 ， 通 过 什么 事件 获取 进度 信息 ? 


12.4 ”本章 小 结 


本 章 主要 介绍 了 HTML5 中 Communication API 的 应 用 ， 其 中 包括 跨 文档 消息 通信 和 
XMLHttpRequest Level 2。 通 过 本 章 的 学 习 ， 读 者 应 该 熟练 掌握 跨 文档 消息 的 发 送 与 接收 方法 ， 并 
能 使 用 XMLHttpRequest 传送 消息 。 


Web Workers API 与 Web SQL API 


HTML5 中 增加 了 很 多 新 的 API， 其 中 Web Workers API 用 于 处 理 多 线程 操作 ， 可 以 提高 程序 
运行 效率 ， 有 效 避 免 页 面 无 响应 的 问题 ， 而 Web SQL API 则 用 于 在 页 面 进行 数据 库 操作 ， 可 以 将 
部 分 数据 存储 在 客户 端 浏览 器 中 , 并 以 数据 库 操 作 方式 对 其 进行 各 种 操作 。 本 章 将 详细 介绍 这 两 个 
API 的 使 用 方法 。 


13.1 Web Workers 


在 HIML4 与 JavaScript 创建 的 Web 程序 中 , 所 有 的 任务 处 理 都 是 在 单线 程 中 执行 的 , 当 遇 到 
需要 大 计算 量 处 理 的 任务 时 ， 就 花费 很 长 时 间 ， 而 且 Web 页 面 没 有 响应 ， 甚 至 出 现 浏览 器 崩溃 的 
现象 。 而 在 HIML5 中 提供 了 一 个 JavaScript 多 线程 解决 方案 , 这 样 不 仅 可 以 保证 Web 页 面 能 够 正 
常 响应 ， 而 且 还 可 以 充分 发 挥 处 理 器 多 核 的 优势 ， 这 个 方案 就 是 Web Workers。 


13.1.1 Web Workers 简介 


Web Workers 是 HIML5 中 的 工作 线程 ， 是 运行 在 后 台 的 JavaScript， 它 能 够 独立 于 其 他 的 脚 
本 。 当 Web Workers 运行 时 ， 不 会 影响 页 面 的 性 能 ， 用 户 依然 可 以 在 页 面 进行 单 击 、 选 取 等 操作 。 
在 后 台 运行 Web Workers 不 受 任务 复杂 程度 的 影响 ， 可 以 长 时 间 运 行 ， 同 时 保证 页 面 性 能 。 由 于 
Web Workers 是 多 线程 工作 ， 所 以 当 Web 程序 启动 时 调用 Web Workers， 并 不 会 影响 Web 页 面 的 
启动 性 能 。 

在 调用 Web Workers 时 ,我 们 不 希望 影响 到 其 他 的 脚本 ， 需 要 将 单独 执行 的 JavaScript 代码 放 
到 一 个 独立 的 js 文件 中 ， 然 后 在 页 面 中 调用 Worker 构造 函数 来 创建 一 个 线程 ， 参 数 是 该 文件 的 路 
径 。 创 建 Worker 的 代码 如 下 : 


Var worker=new Worker ("js/worker.js ") 7 
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因为 Worker 在 执行 时 不 能 影响 页 面 的 性 能 , 所 以 Worker 执行 的 JavaScript 代码 中 不 能 访问 页 
面 或 窗口 对 象 ， 否 则 会 引发 错误 。 但 是 我 们 可 以 通过 发 送 和 接收 消息 的 方式 在 页 面 和 Worker 之 间 传 
递 数据 ， 使 用 Worker 对 象 的 onmessage 事件 获取 在 后 台 程 序 中 接收 的 消息 。 接 收 消息 的 代码 如 下 : 

worker.onmessage=function (event) 

{ 


// 处 理 接收 到 的 消息 
} 


使 用 Worker 对 象 的 postMessage 方法 向 后 台 线 程 发 送 消息 。 发 送 消息 的 代码 如 下 : 


worker .postMessage (message); 


虽然 Worker 可 以 在 后 台 长 时 间 运 行 ， 但 是 如 果 运 行 过 程 中 一 直 没有 结果 返回 ， 页 面 长 时 间 没 
有 收 到 反馈 消息 也 是 不 合适 的 ， 所 以 在 适当 的 时 候 可 以 主动 停止 Worker 运行 。 停 止 Worker 运行 
的 方法 有 两 种 ， 一 种 是 在 页 面 中 调用 Worker 的 terminate() 方 法 。 相 关 代码 如 下 : 
if (event .data>1000) 
{ 
Worker .terminate () 7 


return; 


} 


另 一 种 是 在 Worker 内 部 调用 close0 方 法 。 相 关 代 码 如 下 : 
if(result<10000) 
{ 

self.postMessage (message); 

close(); 


} 


13.1.2 实例: Web Workers 简单 应 用 


在 本 例 中 ， 我 们 将 使 用 Web Workers 循环 计算 从 1 到 给 定数 值 的 和 ， 且 当 这 个 和 大 于 上 限 值 
时 停止 计算 ， 最 终 将 每 次 的 计算 结果 全 部 显示 在 页 面 上 。 先 来 看 HTML 中 的 代码 。 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>13.1.1</title> 

<script language="javascript"> 

Var worker=new Worker ("worker.js"); 

worker .onmessage=function (event) 

{ 

document .getElementById ("sum") .innerHTML=event .data; 
} 
function calculate() 


{ 
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Var num=parseInt (document .getElementByYId ("num") .value,10); 
Var maxNum=parseInt (document .getElementBYId ("maxNum") .value,10); 
worker .postMessage ({num:num,maxNum:maxNum}); 

} 

</script> 

</head> 

<body> 

<hl>Web Workers 求 和 </h1> 

请 输入 : <input type="text" id="num"/><br> 

最 大 值 : <input type="text" id="maxNum" value="100"/><br> 

<button onClick="calculate()"> 计 算 </button><hr /> 

<h3 id="sum"></h3> 

</body> 

</html> 


在 这 段 代码 的 JavaScript 中 ,我 们 先 创建 了 一 个 worker 对 象 , 然后 通过 worker 对象 的 onmessage 
事件 监听 结果 ， 并 将 结果 显示 在 页 面 中 。 在 HTML 页 面 中 有 两 个 文本 输入 框 : 第 一 个 用 于 输入 一 
个 整数 ， 第 二 个 用 于 输入 计算 结果 的 上 限 值 ， 当 用 户 单 击 “ 计 算 ” 按 钮 后 ， 通 过 调用 calculate0 方 
法 将 这 两 个 值 通过 worker 对 象 的 postMessage 方法 传递 到 后 台 线程 进行 计算 。 在 创建 worker 对 象 
时 我 们 使 用 了 一 个 JavaScript 文件 workerjs， 下 面 是 这 个 js 文件 中 的 代码 。 

onmessage=function (event) 

{ 

Var num=event .data.num; 

Var maxNum=event .data.maxNum; 
var result=[]; 

Var tem=0; 

for (var i=0;i<=num;i++) 


{ 
temt+=i; 
if (tem<maxNum) 
{ 
result .push (i+"=>"+tem+"<br />"); 
jelse 
{ 
result .push (i+"=> 结 果 大 于 "+maxNum) ; 
close(); 
break; 
} 
} 


self.postMessage (result.join(' ')); 
了 


在 这 段 代码 中 ， 我 们 通过 event.data 对 象 分 别 获取 到 worker 对 象 传递 过 来 的 两 个 参数 。 根 据 
规则 将 每 次 计算 的 结果 都 与 最 大 值 进行 比较 ， 如 果 计 算 结果 小 于 最 大 值 ， 则 将 结果 保存 起 来 ， 否 则 
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在 结果 中 添加 “结果 大 于 ”信息 提示 ， 然 后 通过 close0 方 法 停止 worker 运行 ， 最 后 将 所 有 结果 返 
回 到 主线 程 。 本 例 代码 运行 效果 如 下 图 所 示 。 


13->91 
14-> 结 果 大 于 100 


13.1.3 ”Web Workers 谋 套 


如 果 后 台 线程 要 处 理 的 工作 比较 多 ， 我 们 还 可 以 给 后 台 线程 嵌 套 子 线程 ， 让 子 线程 分 担 一 部 
分 主线 程 的 工作 ， 待 子 线程 完成 后 ， 再 将 结果 返回 到 主线 程 ， 主 线程 与 页 面 再 进行 交互 。 

下 面 我 们 来 看 一 个 单 层 嵌 套 的 例子 。 在 本 例 中 ， 我 们 将 在 给 定 的 数值 内 寻找 所 有 质数 ， 然 后 
计算 这 些 质数 的 和 。 我 们 将 在 后 台 线程 中 处 理 寻 找 质 数 的 工作 , 在 子 线程 中 处 理 计算 质数 和 的 工作 。 
非常 糟糕 的 是 目前 Chrome 浏览 器 还 不 支持 线程 翌 套 ， 而 浏览 器 正 11 却 可 以 运行 线程 菊 套 程序 。 

先 来 看 一 下 HTML 页 面 的 代码 。 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>13.1.2</title> 

<script language="javascript"> 


Var worker=new Worker ("Fworker.js"); 
worker .onmessage=function (event) 
{ 
Var intArray=JSON.parse (event .data); 
var tem=" 所 有 质数 : "; 
for (var i=0;i<intArray.length-1;i++) 
{ 
temt+=intArray[i]+","; 
} 
tem=tem. substr (0, tem.length-—1); 
tem+="<br> 质 数 总 和 : "+intArray[intArray.length-1]; 
document .getElementBYId("sum") .innerHTML=tem; 
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function calculate() 
Var num=parseInt (document .getElementById ("num") .value, 10); 
Worker.postMessage (num) 7 

} 

</script> 

</head> 

<body> 

<hl>Web Workers 求 质数 和 </h1> 

请 输入 : <input type="text" id="num" value="10"/><br> 

<button onClick="calculate()"> 计 算 </button><hr /> 

<h3 id="sum"></h3> 

</body> 

</html> 


在 这 段 代码 中 ， 我 们 主要 关注 worker 对 象 的 onmessage 事件 处 理 ， 最 终 会 将 处 理 的 结果 以 数 
组 的 形式 返回 ， 并 在 返回 时 对 数组 进行 JOSN 字符 串 处 理 ， 所 以 在 这 里 接收 数据 时 需要 使 用 JSON 
的 反 序 列 化 处 理 。 数 组 的 末 位 存放 的 是 质数 和 ， 其 他 位 存放 的 是 寻找 出 来 的 所 有 质数 ， 最 后 将 这 些 
质数 和 计算 结果 全 部 显示 在 页 面 上 。 在 创建 worker 对 象 时 ， 使 用 了 JavaScript 文件 Fworkerjs， 该 
文件 中 的 代码 如 下 : 


onmessage=function (event) 


{ 


互 


瑟 


Var num=event.data; 
Var intArray=[]; 
for (var i=2;i<=num;i++) 
上’ 
for (var j=2;j<=i/2;j++) 


{ 


if (i%j==0) 
t 
break; 

} 
} 
if(j>i/2) 
| 

intArray.push (i); 
} 


} 
Var worker=new Worker ("Cworker.js"); 
worker .postMessage (JSON.stringify(intArray)); 
worker .onmessage=function (event) 
{ 
postMessage (event .data); 
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在 这 段 代 码 中 ， 首 先 接收 页 面 传递 的 参数 ， 然 后 寻找 所 有 的 质数 ， 并 将 寻找 到 的 质数 存放 在 
一 个 数组 中 。 接 着 根据 JavaScript 文件 Cworkerjs 创建 一 个 worker 对 象 ， 使 用 worker.postMessage 
方法 通过 JSON 字符 串 处 理 将 数组 发 送 到 子 线程 ,同时 监听 子 线程 返回 的 数据 , 将 子 线程 返回 的 数 
据 通 过 postMessage 传递 给 页 面 。Cworkerjs 文件 中 的 代码 如 下 : 

onmessage=function (event) 

{ 

Var intArray = JSON.parse (event.data); 
Var Sum=07 
for (var i=0;i<intArray.length;i++) 
{ 
sumt+=parseInt (intArray[i]); 
} 
intArray.push (sum); 
self.postMessage (JSON.stringify (intArray)); 
close(); 


} 


在 这 段 代 码 中 , 首先 通过 JSON 反 序列 化 将 主线 程 传递 过 来 的 参数 反 序 列 化 为 数组 , 然后 循环 
遍历 数组 中 的 每 一 个 质数 并 计算 总 和 ， 最 后 将 计算 结果 保存 在 数组 中 ， 通 过 调用 selfpostMessage 
方法 将 数组 JSON 字符 串 序 列 化 后 发 送 到 主线 程 ， 然 后 停止 子 线程 。 本 例 在 正 浏览 器 中 的 执行 效 
果 如 下 图 所 示 。 


€ [or [Se 


Web Workers 求 质数 和 
请 给 和 [6 ] 
EE 


所 有 导数 :2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53,59,61,67,71,73,79,83,89,97 
数 总 和 : 1060 


13.2 Web SQL 


对 于 Web 应 用 程序 而 言 ， 数 据 的 持久 化 存储 一 直 都 是 一 个 问题 ， 早 期 大 家 都 在 使 用 Cookie， 
但 是 由 于 受 存储 大 小 和 安全 风险 等 因素 的 影响 ,只 能 存储 少量 数据 。 在 第 9 章 中 我 们 介绍 了 HIML5 
中 使 用 Web Storage 实现 数据 的 持久 化 存储 ， 但 是 如 果 数 据 量 比较 大 ， 依 然 是 件 很 麻烦 的 事情 ， 本 
节 将 向 大 家 介绍 HIML5 中 本 地 数据 库 的 存储 方式 ， 通 过 Web SQL API 来 操作 客户 端的 数据 库 。 
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13.2.1 Web SQL 基本 使 用 


如 果 以 前 接触 过 数据 库 操作 ， 那 么 对 于 Web SQL 的 使 用 将 不 会 陌生 ， 因 为 其 存储 方式 与 我 们 
接触 的 SqlServer 和 Oracle 都 比较 像 。 使 用 Web SQL 可 以 执行 创建 打开 数据 库 、 创 建 表 、 添 加 数 
据 、 更 新 数据 、 删 除数 据 和 删除 表 等 操作 ， 在 介绍 具体 的 增 、 删 、 改 操作 之 前 ， 我 们 先 来 认识 一 下 
Web SQL 中 的 三 个 核心 方法 。 

(1) openDatabase: 使 用 该 方法 可 以 打开 或 创建 数据 库 对 象 。 如 果 当 前 没有 数据 库 ， 则 创建 
一 个 新 的 数据 库 ， 如 果 当 前 已 经 有 数据 库存 在 ， 则 打开 指定 的 数据 库 。 

(2) transaction: 使 用 该 方法 可 以 控制 事务 提交 或 回 滚 。 在 一 个 事务 中 包含 的 所 有 操作 必须 全 
部 成 功 ， 该 事务 才能 提交 成 功 ， 否 则 所 有 已 经 完成 的 操作 将 全 部 回 滚 。 

(3) executeSql: 使 用 该 方法 可 以 执行 SQL 操作 ， 包 括 查 询 数 据 、 修 改 数据 和 删除 数据 。 


13.2.2 ”数据 库 的 基本 应 用 


任何 一 个 数据 库 的 操作 ， 无 外 乎 创建 数据 库 连 接 、 打 开 数 据 库 ， 然 后 对 数据 进行 增 、 删 、 改 
操作 ，Web SQL 的 基本 应 用 也 包含 这 些 内 容 ， 以 下 将 详细 进行 介绍 。 


1. 打开 数据 库 


openDatabase 方法 用 于 打开 已 有 的 数据 库 ， 如 果 数据 库 不 存在 ， 则 创建 新 的 数据 库 。 使 用 该 方 
法 创建 数据 的 语句 如 下 : 
Var db = openDatabase ("AccountingDB", "2.0", "mydb", 5*1024 * 1024,function 
callBack ()); 
if(!db) 
{ 
alert ("创建 数据 库 失 败 ! "); 
} 
else 
{ 
alert ("创建 数据 库 成 功 ! ") 7 
} 
该 方法 总 共有 5 个 参数 ， 第 一 个 参数 是 创建 的 数据 库 名 称 ， 第 二 个 参数 是 数据 库 版 本 ; 第 三 
个 参数 是 数据 的 描述 ; 第 四 个 参数 是 数据 库 的 大 小 ,单位 是 字 节 ; 第 五 个 参数 是 一 个 回调 函数 ， 可 
用 于 执行 其 他 相关 操作 ， 也 可 以 省 略 。 
Web SQL 创建 的 是 一 个 sqllite 数据 库 ， 可 以 使 用 SQLiteSpy 打开 查看 ， 存 储 在 本 地 C:\Users\ 
Administrator\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_ 261 目录 下 。 


2. 创建 数据 表 

在 Web SQL 中 需要 使 用 数据 库 的 transaction 方法 执行 数据 库 操作 , 该 方法 接收 一 个 回调 函数 ， 
而 在 执行 具体 的 sql 命令 时 ， 需 要 使 用 回调 函数 的 结果 执行 executeSql 方法 。executeSql 方法 接收 4 
个 参数 .第 一 参数 是 sql 语句 字符 串 ; 第 二 参数 是 sql 语句 的 参数 ， 第 三 个 参数 是 执行 成 功 时 的 回 
调 函 数 ， 第 四 个 参数 是 执行 失败 时 的 回调 函数 。 创 建 数据 表 的 代码 如 下 : 
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function createTUser (db) 
上 
qb.transaction (function (tx) { 
txX .executeSql ("create table if not exists tUser (id UNIQUE, name TEXT)", [], 
function (tx，result){ alert ("创建 表 tUser 成 功 ! ") }， 
function (tx，error) { alert ("创建 表 tUser 失败 :" + error.message);} 
js 
]) 
二 


function(tx) 是 transaction 方法 的 参数 ,我 们 将 创建 tUser 表 的 sql 语句 作为 executeSql 方法 的 第 
一 个 参数 ， 因 为 在 创建 数据 表 的 sql 语句 中 没有 参数 ， 所 以 executeSql 方法 的 第 二 个 参数 是 一 个 方 
括号 ， 第 三 个 参数 是 执行 成 功 的 回调 函数 ，result 是 执行 的 结果 ， 第 四 个 参数 是 执行 失败 后 的 回调 
函数 ，error 是 错误 信息 。 

3. 写 入 数据 


写 入 数据 的 操作 与 创建 数据 表 的 操作 类 似 , 都 是 通过 transaction 和 executeSql 方法 完成 的 ， 它 
们 的 区 别 主要 在 于 sql 语句 不 同 ， 并 且 在 写 入 数据 的 sql 语句 中 需要 传递 两 个 参数 ， 使 用 占 位 符 问 
号 代替 ， 参 数 的 值 在 executeSql 方法 的 第 二 参数 中 。 写 入 数据 的 代码 如 下 : 

function insertData (db) 


Var sql="insert into tUser(id,name) values (?,?) "7 
var data=["1"," 张 三 "] 7 
db .transaction (function (tx){ 
tx.executesql (sql,data, 
function (tx, result) {alert ("数据 添加 成 功 !") }， 
function (tx,error) {alert ("数据 添加 失败 : "+error.message) }) 7 
]) 7 
} 


在 Chrome 浏览 器 中 ， 我 们 可 以 通过 按 F12 键 打开 开发 者 工具 ， 在 Resources 中 直观 地 查看 写 
入 的 数据 ， 效 果 如 下 图 所 示 。 


[E> 
€ 3 CD localhost/i 1/websql htm 
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4. 修改 数据 


修改 数据 与 写 入 数据 类 似 ， 在 sql 语句 中 都 有 两 个 参数 ， 但 是 具体 的 sql 语句 不 同 ， 给 sql 语 
句 传递 的 参数 也 不 同 。 修 改 数据 的 代码 如 下 : 
function updateData (db) 
{ 
var sql="update tUser set name=? where id=?"; 
var data=[" 李 四 ", "1"]; 
db.transaction (function (tx) 
{ 
tx.executeSql (sql, data, 
function (tx, result) {alert ("数据 修改 成 功 !") }， 


function (tx,error) {alert ("数据 修改 失败 : "+error.message)}); 
]) 7 
3» 


5. 查询 数据 


查询 数据 同样 需要 使 用 transaction 和 executeSql 方法 。 因 为 查询 语句 sql 中 没有 参数 ， 所 以 
executeSql 方法 的 第 二 个 参数 是 一 个 空 的 方 括号 。 需 要 注意 的 是 ， 执 行 查询 成 功 后 ， 在 返回 的 结果 
中 保存 了 我 们 查询 到 的 数据 ， 这 些 数据 以 数据 表 的 形式 存在 于 result 中 ， 需 要 使 用 循环 遍历 的 方式 
对 其 进行 处 理 。 查 询 数据 的 代码 如 下 : 

function queryData (db) 

{ 


Var sql="select * from tUser™"; 
var data=[]; 


db.transaction (function (tx) 


{ 
tx.executesql (sql,data, 
function (tx, result) 
{ 
for (var i=0;i<result.rows.length;i++) 
console.log(result.rows.item(i)); 
} 
}, 
function (tx,error) {alert ("数据 查询 失败 : "+error.message)}); 
Ds; 
了 
6. 删除 数据 


在 执行 删除 数据 的 操作 时 ， 我 们 同样 使 用 了 不 带 参数 的 sql 语句 ， 但 是 executeSql 方法 的 第 二 
个 参数 必须 有 ， 否 则 会 出 现 错误 。 删除 数据 的 代码 如 下 : 
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function deleteData (db) 
{ 
Var sql="delete from tUser"7 
Var data=[]; 
db .transaction (function (tx) 
{ 
tx.executeSql (sql,data, 
function (tx, result) {alert ("数据 删除 成 功 !") }， 
function (tx,error) {alert ("数据 删除 失败 : "+error.message)}); 
]) 
} 


7. 删除 数据 表 


删除 数据 表 的 操作 与 删除 数据 的 操作 类 似 ， 区 别 在 于 它们 执行 了 不 同 的 sql 语句 。 删 除数 据 表 
的 代码 如 下 : 
function deleteTable (db) 
4 
Var sql="drop table tUser"; 
var data=[]; 
db.transaction (function (tx) 


tx.executesql (sql,data, 
function (tx, result) {alert ("数据 表 删除 成 功 !") }， 
function (tx,error) {alert ("数据 表 删除 失败 : "+error.message)}); 
DD); 
了 


13.2.3 实例 : 创建 数据 库 并 创建 数据 表 


本 例 我 们 将 创建 一 个 名 为 “AccountingDB” 的 数据 库 ， 版 本 为 2.0， 备 注 为 “mydb”， 大 小 为 
5MB， 然 后 在 数据 库 中 创建 一 个 名 为 “AccountingTable” 的 数据 表 。 数 据 表 的 结构 如 下 表 所 示 。 


字 段 备注 
id 主键 
date 日 期 
income 收入 
spending 支出 
note 备注 


创建 数据 库 和 数据 表 的 代码 如 下 : 

Var db = openDatabase ("AccountingDB"，"2.0"，"mydb"，5*1024 * 1024) 7 
if(!dqb) 

{ 


console.1og ("创建 数据 库 失 败 ! "); 
} 
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else 
createAccountingTable (db); 
} 
function createAccountingTable (db) 
{ 
db.transaction (function(tx) { 
tx.executesql ("create table if not exists AccountingTable (id UNIQUE, 
date, income, spending,note)", [], 
function (tx,，result){ console.1og ("创建 数据 表 AccountingTable 成 功 ! ") }， 
function (tx，error) { console.1og ("创建 数据 表 AccountingTable 失败 :" + 
error.message);} 
); 
Ds; 
} 


执行 这 段 代 码 后 , 我 们 可 以 在 Chrome 浏览 器 的 开发 者 模式 中 看 到 新 建 的 数据 库 和 数据 表 ， 如 
下 图 所 示 。 
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13.2.4 实例 : 插入 数据 与 获取 数据 


本 例 将 在 创建 的 数据 表 AccountingTable 中 插入 一 些 数据 ， 然 后 通过 查询 获取 这 些 数据 ， 并 将 
其 在 浏览 器 后 台 输 出 。 首 先 来 看 插入 数据 的 实现 代码 : 
function insertData (db) 
{ 
Var sql= 
"insert into AccountingTable (id, date, income, spending,note) 
valuest2r 2 2 2 2) "sn 
var datal=["1","2015-2-3", "2000", "120", "终于 还 钱 了 ! 买 肉 打 牙 祭 ! "]; 
var data2=["2","2015-2-3", "0", "300", "又 添 一 件 新 衣服 ! "]; 
var data3=["3","2015-2-4", "0","500", "为 了 幸福 和 她 吃 顿 好 的 ! "] ; 


db .transaction (function (tx) { 
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tx.executeSql (sql, datal, 
function(tx,，result) { console.1og(" 写 入 数据 成 功 ! "); }， 


function (tx，error){ console.1o0g(" 写 入 数据 失败 : "+error.message); 
nD; 


tx.executesql (sql, data2, 
function (tx，result){ console.1og(" 写 入 数据 成 功 ! "); }， 
function (tx，error){ console.1og(" 写 入 数据 失败 : "+error.message); 
Ds; 
tx.executesql (sql, data3, 
function (tx，Tresult){ console.1og(" 写 入 数据 成 功 ! "); }， 


function (tx，error){ console.1og(" 写 入 数据 失败 : "+error.message); 
Ds; 
1D); 
} 


我 们 用 这 个 函数 蔡 换 创建 数据 表 成 功 后 回调 函数 的 输出 ， 然 后 执行 这 段 代 码 ， 可 以 在 Chrome 
浏览 器 中 看 到 如 下 图 所 示 的 效果 。 
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然后 来 看 查询 数据 的 实现 代码 : 
function queryData (db) 
{ 
var sql="select * from AccountingTable"; 
var data=[]; 
db.transaction (function (tx) 
* 
tx.executesql (sql, data, 
function (tx, result) 


{ 
var text=" [序号] [日 期 ] [收入 ] [支出 ] [备注] \n"; 


for (var i=0;i<result.rows.length;i++) 


{ 
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text+="["+result.rows.item(i) .id+"] 
["+result.rows.item(i) .date+"] 
["+result.rows.item(i) .income+"] 
["+result.rows.item(i) .spending+"] 
["+result.rows.item(i) .note+"] \n"7 
} 
console.log (text); 


} 
function (tx,error) {alert ("数据 查询 失败 : "+error .message) }) 7 


} 
执行 这 段 代 码 后 ， 在 Chrome 浏览 器 中 可 以 看 到 输出 的 查询 数据 ， 如 下 图 所 示 。 


weeunting 
i 


计 

这 了 ! 天 条 生 六 
【过于 在 脱 1 ] 
BE 


测试 题 
(1) HTML5 中 ， 如 何 创建 一 个 Worker? 
(2) 在 使 用 Worker 时 如 何 获取 和 向 后 台 程序 发 送 数据 ? 
(3) 正在 运行 的 Worker 能 停止 吗 ? 如 何 停止 ? 
(4) Web SQL 中 三 个 核心 方法 是 什么 ? 
(5) Web SQL 中 实现 增 、 删 、 改 、 查 操作 的 基本 流程 是 什么 ? 


13.3 本章 小 结 


本 章 主要 介绍 了 HIMLS 中 Web Workers API 和 Web SQL API 的 应 用 。 通过 使 用 Web Worker 
API 可 以 实现 多 线程 应 用 ， 有 效 提高 程序 运行 效率 ， 保 证 页 面 响应 效果 。Web SQL API 实现 了 浏览 
器 中 数据 库 的 操作 ， 有 效 减少 了 页 面 与 服务 器 交互 的 频率 ， 提 高 了 页 面 存储 能 力 。 


WebSocket API 


在 HTML5 中 引入 了 WebSocket API 技术 , 该 技术 可 以 满足 Web 端 与 服务 端 信息 的 实时 通信 。 
它 是 一 种 全 新 的 协议 ， 可 以 在 浏览 器 和 服务 器 之 间 建 立 一 个 基于 TCP 连接 的 双向 通道 ， 保 持 Web 
端 与 服务 端 信息 的 同步 。 本 章 将 详细 介绍 有 关 WebSocket API 的 使 用 。 


14.1 WebSocket 概述 


使 用 Socket 通信 可 以 在 两 个 应 用 程序 之 间 通 过 “ 套 接 字 ” 向 网 络 发 出 或 接收 请 求 ， 以 保证 客 
户 端 和 服务 端 数据 的 一 致 性 ， 而 WebSocket 则 是 应 用 于 Web 端 和 服务 端的 新 技术 ， 使 用 该 技术 ， 
后 台 可 以 随时 向 前 端 推 送 消息 ， 以 保证 前 后 台 状态 一 致 。 

传统 的 Web 通信 都 是 由 Web 端 向 服务 端 发 送 请 求 ， 服 务 端 接 收 请 求 后 进行 处 理 ， 再 将 处 理 结 
果 返 回 给 Web 端 ，Web 端 接收 到 服务 端 返 回 的 消息 后 , 将 消息 显示 在 Web 页 面 上 ， 这 种 通信 适合 
于 对 时 效 性 要 求 不 高 的 应 用 。 

如 果 信 息 变化 比较 频繁 ， 要 保证 信息 的 时 效 性 ， 就 需要 Web 端 以 轮 询 的 方式 或 Comet 的 方式 
模拟 实时 效果 ， 这 种 方式 虽然 能 解决 时 效 性 的 问题 , 但 是 服务 端 和 客户 端 编码 都 比较 复杂 ， 而 且 效 
率 不 高 。 

在 HIML5 中 新 增加 了 WebSocket API，Web 端 与 服务 端 只 需要 一 个 握手 的 动作 ,就 可 以 实现 
双 工 通信 。Web 端 与 服务 端 建立 连接 后 ，Web 端 可 以 在 任意 时 刻 向 服务 端 请 求 消息 ， 服 务 端 也 可 
以 在 任何 时 刻 将 消息 推送 到 Web 端 ， 直 到 连接 被 关闭 为 止 。 不 仅 如 此 ，WebSocket 还 允许 跨 域 
通信 。 
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14.2 WebSocket 服务 器 


使 用 WebSocket 接口 构建 Web 应 用 之 前 ， 首 先 需要 一 个 实现 了 WebSocket 规范 的 服务 器 。 服 
务 端的 编程 需要 处 理 以 下 任务 : 


(1) 运行 HTTP 服务 器 。 
(2) 能 够 根据 不 同 的 URL 请求 做 出 不 同 的 处 理 ， 也 就 是 路 由 程序 。 
(3) 当 请 求 被 服务 器 接收 并 由 路 由 程序 传递 后 ， 需 要 对 最 终 的 请 求 进行 处 理 。 
目前 已 经 出 现 了 一 些 比较 成 熟 的 WebSocket 服务 端 ， 如 Kaazing WebSocket Gateway、 
mod_pywebsocket、Nett、NodeJs 等 。 下 面 我 们 就 以 NodeJs 为 例 ， 详 细 介 绍 如 何 构 建 服务 器 。 
首先 需要 到 NodeJs 官网 下 载 适合 自己 操作 系统 的 NodeJs 版 本 ， 下 载 地 址 为 
https://nodejs.org/download/， 下 载 完成 后 直接 安装 即 可 。 如 果 使 用 的 是 windows 操作 系统 ， 那 么 还 
需要 下 载 其 他 两 个 工具 : python 2.7 和 Microsoft Visual C++， 用 于 支持 NodeJs。 
安装 以 上 工具 后 ， 就 可 以 在 命令 程序 中 输入 cmd， 切 换 到 NodeJs 安装 目录 下 ， 安 装 NodeJs 
模块 。 安 装 命令 如 下 : 
npm install nodejs-websocket 


等 待 安装 完成 后 ， 我 们 可 以 编写 一 个 比较 简单 的 服务 端 程序 ， 用 于 启动 HITP 服务 。 具 体 代 
码 如 下 : 
Var http = require("http"); 
http.createServer (function (request, response) { 
response.writeHead(200, {"Content-Type": "text/plain;charset=UTF-8"}); 
response.write ("服务 已 启动 。"); 


response.end(); 
}) .listen(8088); 


保存 这 段 代码 到 NodeJs 安装 目录 下 ， 并 命名 为 serverjs。 返 回 到 命令 执行 窗口 ， 输 入 以 下 命 
令 启动 服务 : 


node server.js 


启动 服务 之 后 ， 在 浏览 器 中 输入 localhost:8088， 即 可 显示 信息 “服务 已 启动 ”。 这 样 一 个 比 
较 简单 的 WebSocket 服务 器 就 搭建 好 了 。 


14.3 使 用 WebSocket API 


WebSocket API 的 使 用 比较 简单 ， 因 为 当前 各 个 浏览 器 对 HTMLS5 支持 的 程度 不 同 ， 所 以 在 使 
用 WebSocket API 之 前 需要 先 检查 浏览 器 的 支持 情况 ， 其 次 需要 建立 Web 端 与 服务 端的 链接 ， 只 
有 建立 了 链接 ，Web 端 与 服务 端 才能 实现 通信 。 
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14.3.1 浏览 器 支持 情况 检测 


目前 大 部 分 浏览 器 都 支持 WebSocket API， 浏 览 器 都 提供 了 WebSocket 类 型 ， 在 Firefox 浏览 
器 中 为 MozWebSocket。 检 测 浏览 器 是 否 支持 的 代码 如 下 : 
window.WebSocket = window.WebSocket || window.MozWebSocket; 
if (!window.WebSocket){ 
alert ("该 浏览 器 不 支持 WebSocket! "); 


return; 


} 
14.3.2 ”WebSocket API 客户 端的 基本 用 法 


建立 WebSocket 通信 和 链接 之 前 ， 首 先 要 创建 一 个 WebSocket 对 象 ， 通 过 该 对 象 的 构造 函数 传 
递 一 个 URL 参数， 这样 即 可 创建 一 个 链接 。 具 体 代码 如 下 : 
Var Ws = new WebSocket ("ws://127.0.0.1:8088"); 


因为 WebSocket 是 一 个 新 的 协议 ,不同 于 HTTP 协议 ， 所 以 用 于 创建 链接 的 URL 字符 串 需要 
以 “ws” 或 “wss”〔 加 密 通信 ) 作为 开头 。 创 建 链接 后 ，Web 端 会 与 服务 端 进行 一 次 握手 ， 此 时 
要 求 服务 端正 常 运行 ， 否 则 链接 创建 失败 。 

通信 和 链接 建立 后 ， 就 可 以 进行 Web 段 与 服务 端的 双向 通信 了 。 使 用 WebSocket 对 象 的 send 
方法 可 以 将 文本 数据 发 送 到 服务 端 。 发 送信 息 的 代码 如 下 : 


websocket .send ("message"); 


除了 文本 数据 外 ， 其 他 任何 JavaScript 对 象 都 可 以 通过 JSON 对 象 转换 为 文本 数据 ， 然 后 进行 

WebSocket 对 象 还 可 以 通过 监听 相关 事件 ， 处 理 相应 情况 下 的 其 他 操作 。 通 过 获取 onopen 事 
件 句柄 来 监听 socket 的 打开 事件 ， 代 码 如 下 : 

webSocket .onopen=function(){ 


console.1og ("链接 已 建立 "); 
} 


通过 获取 onmessage 事件 句柄 来 接收 服务 端 传 过 来 的 数据 ， 代 码 如 下 : 
webSocket .onmessage=function (msg) 1{ 

console.1og(" 接 收 的 消息 : "+msg.data); 
通过 获取 onclose 事件 句柄 来 监听 socket 的 关闭 事件 ， 代 码 如 下 : 
webSocket .onclose=function(){ 


console. 1og ("链接 已 关闭 ") ; 


上 
通过 获取 onerror 事件 句柄 来 监听 socket 的 错误 事件 ， 代 码 如 下 : 
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webSocket. onerror=function (msg) { 
console.1o0g ("出 现 错误 : "+msg.data) ; 


14.4 实例 : 创建 HTML5 WebSocket 应 用 程序 


本 节 我 们 通过 一 个 简单 的 WebSocket 程序 ， 介 绍 WebSocket 的 实际 应 用 。 在 本 例 中 ， 将 实现 
一 个 WebSocket 客户 端 程序 ， 通 过 连接 服务 端 建立 通信 连接 ， 然 后 单 击 客户 端 程序 上 的 响应 按钮 ， 
将 对 应 的 信息 发 送 到 服务 端 ， 通 过 服务 端的 反馈 ， 再 将 这 些 信息 显示 在 客户 端 ， 最 后 关闭 连接 。 


14.4.1 编写 客户 端 HTML 文件 


客户 端的 HTML 文件 比较 简单 ， 仅 仅 是 几 个 按钮 和 文本 框 。 详 细 代码 如 下 : 
<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>14.4.1</title> 

<style> 


#btn { height:120px; width:120px; margin:S5px} 

</style> 

</head> 

<body> 

<hl>Web Socket 客户 端 </h1> 

<button id="connection" type="button" onclick="connect () ;"” disabled> 连 接 
</button> 

<button id="disConnection" tyYype="button"”onclick="disConnect (); "disabled> 
断 开 </button> 

<br /> 

<br /> 

<textarea id="content" multiple rows="20" cols="120" readonly></textarea> 

<be /> 

<button id="btn" type="button" onclick="send('A');">A</button> 

<button id="btn" type="button" onclick="send('B');">B</button> 

<button id="btn" type="button" onclick="send('C');">C</button> 

<button id="btn" type="button" onclick="send('D');">D</button> 

<button id="btn" type="button" onclick="send('E');">E</button> 

</body> 

</html> 
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14.4.2 ”添加 服务 端 WebSocket 代码 


在 进行 WebSocket 通信 之 前 ， 首 先 要 启动 服务 端 ， 这 里 给 出 了 一 个 简单 的 服务 端 代 码 ， 其 主 
要 功能 就 是 将 接收 到 的 信息 发 送出 去 。 具 体 代 码 如 下 : 
Var Ws = require("nodejs-websocket"); 
console .10g ("开始 建立 连接 . . .") 
Var server = Ws.createServer (function (conn){ 
conn.on("text", function (str) { 
console.log(str); 
conn.sendText (str); 
} 
conn.on("close", function () { 
console.1o0g ("关闭 连接 "); 
D); 
conn.on("error", function () { 
console.1og ("异常 关闭 "); 
1D); 
}) .listen(8088) 
console .10g ("WebSocket 建立 完毕 "); 


14.4.3 ”添加 WebSocket 客户 端 代码 


客户 端的 WebSocket 代码 , 在 客户 端 加 载 时 先 判断 浏览 器 是 否 支持 HTML5 WebSocket 并 给 出 
提示 信息 ，Writemsg(msg) 方 法 用 于 向 客户 端 显示 信息 ， 然 后 根据 不 同 的 浏览 器 创建 不 同 的 
WebSocket 对 象 。 

在 进行 WebSocket 通信 之 前 ， 首 先 要 连接 服务 器 ， 当 单 击 “ 连 接 ” 按 钮 时 ， 通 过 connect0 方 
法 连接 服务 端 并 给 出 具体 的 提示 信息 。 当 我 们 每 次 单 击 按钮 时 ，send(btn) 方 法 会 将 按钮 上 对 应 的 字 
母 发 送 到 服务 端 ， 服务 端 再 将 这 些 信息 发 送 到 客户 端 。 在 onmessage 事件 中 ， 接 收服 务 端 发 送 的 消 
息 并 将 其 显示 在 客户 端 页 面 上 ， 最 后 单 击 “ 断 开 ” 按 钮 调用 disConnect0 方 法 断 开 连 接 。 具 体 代码 
如 下 : 

Var ws; 

window.onload=function(){ 

if (!window.WebSocket && !window.MozWebSocket){ 
writemsg ("您 的 浏览 器 不 支持 WebSocket, 请 尝试 其 他 浏览 器 ! ") 7 
document .getElementById("connection") .disabled=true; 
document .getElementById("disConnection") .disabled=false; 
return; 

}jelsetf 
writemsg ("您 的 浏览 器 支持 WebSocket， 可 以 连接 到 服务 器 !") ; 
document .getElementById("connection") .disabled=false; 
document .getElementById("disConnection") .disabled=true; 
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} 
function writemsg (msg){ 
document .getElementById ("content") .innerHTML+=msg+"&#13;&#10;"; 
} 
function connect(){ 
var url="ws://127.0.0.1:8088"; 
ws=new WebSocket (url); 
ey 
if (window.WebSocket) { 
Ws = new WebSocket (url); 
j 
else if(window.MozWebSocket) { 
Ws = new MozWebSocket (Url1) 
} 
} catch (ex) { 
writemsg ("连接 错误 : "+ex.data); 
return; 
} 
writemsg ("正在 连接 服务 器 . . . . . . i 
document .getElementById("connection") .disabled=true; 
document .getElementById("disConnection") .disabled=false; 
ws.onopen = function(){ 
writemsg ("欢迎 加 入 游戏 。"); 
}; 
Ws.onmessage = function (msg){ 
writemsg (msg.data); 
}; 
ws.onclose = function(){ 
document .getElementById("connection") .disabled=false; 
document .getElementById("disConnection") .disabled=true; 
writemsg ("您 已 退出 。"); 
ws .send(" 您 退出 了 。") 
}; 
Ws.onerror = function (msg){ 
document .getElementById("connection") .disabled=false; 
document .getElementById("disConnection") .disabled=true; 
writemsg ("出 错 了 : "+msg.data); 
Bi; 
} 
function send(btn){ 
console.1log (btn); 
Var msg =" 您 单 击 了 : "+ btn; 
ws.send(msg); 
} 


function disConnect (){ 


第 14 章 WebSocket API | 213 


ws.close(); 
document .getElementById ("connection") .disabled=false; 
document .getElementById ("disConnection") .disabled=true; 


} 


14.4.4 ”最 终 效果 


我 们 将 服务 端 WebSocket 代码 命名 为 server.js， 通 过 命令 node serverjs 启动 服务 端 ,然后 运行 
客户 端 代码 ， 单 击 “ 连 接 ” 按 钮 ， 然 后 依次 单 击 各 个 按钮 ， 最 后 单 击 “ 断 开 ”按钮 ， 效 果 如 下 图 所 示 。 
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Web Socket 客户 端 
ETICES 
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Ek 
正在 这 关公 
入 这 戏 。 
部 点击 了 : 人 


测试 题 


(1) 如 何 检测 浏览 器 是 否 支持 WebSocket API? 

(2) WebSocket 的 URL 与 HITP 的 URL 有 什么 不 同 ? 
(3) WebSocket 通过 什么 事件 监听 服务 端 传 来 的 数据 ? 
(4) WebSocket 客户 端 如 何 向 服务 端 发 送 消息 ? 

(5) WebSocket 服务 端 如 何 创建 WebSocket 对 象 ? 


14.5 ”本 章 小 结 


本 章 主要 介绍 了 HIML5 中 WebSocket API 的 使 用 方法 , 通过 本 章 的 学 习 , 读者 应 该 熟练 掌握 
WebSocket 客户 端的 创建 方法 , 能 够 在 WebSocket 各 个 监听 事件 中 处 理 不 同 的 业务 逻辑 , 并 且 能 创 
建 简单 的 服务 端 ， 通 过 对 服务 端 接收 信息 的 处 理 ， 完 成 服务 端 消息 发 送 功能 。 


地 理 位 置 API 


在 人 们 的 日 常生 活 中 ， 地 理 位 置 定 位 已 经 不 是 一 个 新 鲜 的 名 词 ， 随 之 衍生 的 一 系列 产品 和 应 
用 正在 潜移默化 地 改变 着 我 们 的 生活 。 本 章 将 介绍 基于 HTMLS5 的 地 理 位 置 API 的 使 用 方法 。 


15.1 地 理 位 置 的 定位 原理 


地 理 位 置 定位 的 方式 有 很 多 ， 基 于 不 同 的 设备 会 有 不 同 的 实现 方式 与 展现 形式 ， 但 是 其 定位 
的 原理 都 是 相通 的 ， 本 节 将 详细 介绍 地 理 位 置 的 定位 原理 。 


15.1.1 ”地理 位 置 定位 的 方式 及 流程 


大 多 数 人 对 于 定位 的 第 一 反应 应 该 是 全 球 定位 系统 (Global Positioning System，GPS) ， 它 是 
由 美国 军 方 建设 的 一 个 全 球 定位 系统 ， 除 了 GPS 以外， 还 可 以 通过 IP 地 址 、W 运 和 移动 通信 网 络 
等 方式 进行 地 理 位 置 定位 。 

虽然 地 理 位 置 定位 的 方式 不 同 ， 但 是 地 理 位 置 的 获取 流程 都 是 一 样 的 ， 它 们 都 遵循 以 下 流程 : 

(1) 开启 设备 或 打开 应 用 。 

(2) 请 求 地 理 位 置 。 

(3) 根据 定位 方式 的 不 同 ， 查 询 相 关 地 理 信 息 。 

(4) 将 查询 到 的 信息 发 送 到 一 个 信任 的 位 置 服务 器 ， 服 务 器 返回 具体 的 地 理 位 置 。 


15.1.2 ”HTML5 中 如 何 实现 地 理 位 置 定位 


要 在 HIML5 中 实现 地 理 位置 定 位 ， 也 需要 遵循 以 上 流程 。 由 于 HTML5 基于 浏览 器 运行 ， 所 
以 具体 流程 稍 有 变化 。 
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(1) 打开 浏览 器 ， 访 问 地 理 位 置 定位 应 用 。 

(2) 应 用 向 浏览 器 请 求 地 理 位 置 ， 浏 览 器 弹出 询问 ， 询 问 用 户 是 否 共 享 地 理 位 置 。 
(3) 如 果 用 户 允 许 ， 浏 览 器 从 设备 查询 相关 信息 。 

(4) 浏览 器 将 相关 信息 发 送 到 一 个 信任 的 位 置 服务 器 ， 服 务 器 返回 具体 的 地 理 位 置 。 
(5) 浏览 器 持续 追踪 用 户 的 地 理 位 置 。 

(6) 与 Google Map 或 Baidu Map 交互 呈现 位 置信 息 。 


15.2 Geolocation API 


15.2.1 检测 浏览 器 的 支持 


由 于 目前 各 个 浏览 器 对 HTMLS 的 支持 程度 不 一 样 , 所 以 在 使 用 地 理 位置 定 位 之 前 ， 仍 需要 对 
浏览 器 的 支持 情况 进行 检测 。 具 体 代 码 如 下 : 
if (window.navigator.geolocation){ 


alert ("您 的 浏览 器 支持 使 用 HTML5 获取 地 理 位 置信 息 。") 
} 


elsef{ 


alert ("您 的 浏览 器 不 支持 使 用 HTML5 获取 地 理 位 置信 息 。") 
} 


在 HIMLS 中 , 为 window.navigator 对 象 新 增 了 一 个 geolocation 属性 ， 通过 判断 该 属性 可 以 检 
测 浏览 器 是 否 支持 HTMLS5 的 地 理 位 置 定位 功能 。 使 用 Geolocation API 访问 geilocation 属性 , 该 属 
性 包含 以 下 三 个 重要 的 方法 。 
(1) getCurrentPosition: 获取 当前 位 置 。 
(2) watchPosition: 监视 位 置 。 
(3) clearPosition: 清除 监视 。 


15.2.2 ” getCurrentPosition() 方 法 


getCurrentPosition0 方 法 用 于 获取 用 户 当前 的 地 理 位 置信 息 。 该 方法 定义 如 下 : 


void getCurrentPosition (onSuccess, onError, options); 


getCurrentPosition0 方 法 有 三 个 参数 :第 一 个 onSuccess 为 获取 当前 地 理 位 置信 息 成 功 时 所 执行 
的 回调 函数 ， 第 二 个 参数 onError 为 获取 当前 地 理 位 置信 息 失败 时 所 执行 的 回调 函数 ， 第 三 个 参数 
options 是 一 些 可 选 参数 。 

在 onSuccess 函数 中 将 使 用 到 一 个 position 参数 ， 该 参数 获取 地 理 位 置 的 详细 信息 。position 
对 象 具有 两 个 属性 : 一 个 是 timestamp， 用 于 获取 地 理 位 置信 息 的 时 间 截 ， 另 一 个 是 coords， 其 中 
又 包含 了 以 下 属性 。 


(1) latitnde: 当前 地 理 位置 的 维度 。 
(2) longitude: 当前 地 理 位 置 的 经 度 。 
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(3) altitude: 当前 地 理 位 置 的 海拔 高 度 〈 不 能 获取 时 为 null) 。 

(4) accuracy: 获取 到 的 维度 或 经 度 的 精度 〈 以 米 为 单位 ) 。 

(5) altitudeAccuracy: 获取 到 的 海拔 高 度 的 精度 〈 以 米 为 单位 ) 。 

(6) heading: 设备 前 进 的 方向 , 用 面 朝 正 北方 向 的 顺 时 针 旋 转角 度 来 表示 (不 能 获取 时 为 null》。 
(7) speed: 设备 前 进 的 速度 〈 以 米 / 秒 为 单位 ， 不 能 获取 时 为 null) 。 


例如 ， 可 以 使 用 以 下 代码 在 获取 地 理 位 置信 息 成 功 时 输出 当前 地 理 位 置 的 经 度 和 维度 。 


if (navigator.geolocation){ 
navigator.geolocation.getCurrentPosition (showPosition) 7 
J}else{ 
console.10g ("您 的 浏览 器 不 支持 获取 地 理 位 置 。") ; 
} 
function showPosition(position){ 
console.1og ("纬度 : "+position.coords.latitude); 
console.1o0g ("经 度 : "+position.coords.longitude); 


} 
由 于 地 理 位 置信 息 涉及 用 户 隐 私 ， 所 以 当 执 行 getCurrentPosition0 方 法 时 ， 浏 览 器 会 询问 用 户 
是 否 同意 共享 其 位 置信 息 ， 如 下 图 所 示 。 


ED 
¢ 3 C GilocalhosV13/locationhtml 


人 @ htpy//ocalhost 提要 全 届 作 的 计算机 的 所 在 位 轩 信 全 。 元 二 | 关上 上 | 


如 果 用 户 同意 ， 则 继续 执行 其 他 操作 ， 否 则 将 引发 错误 ， 此 时 执行 onError 函数 。 另 外 ， 当 获 
取 地 理 位 置信 息 超时 或 由 于 其 他 原因 造成 获取 地 理 位 置信 息 失败 时 ， 都 会 执行 onError 函数 。 
OnError 函数 将 使 用 一 个 error 对 象 作 为 参数 ， 该 对 象 具 有 code 和 message 两 个 属性 。code 属性 为 
1 表示 用 户 拒绝 了 位 置 服务 ，code 属性 为 2 表示 获取 不 到 位 置信 息 ，code 属性 为 3 表示 获取 信息 
超时 。 而 message 属性 是 一 个 字符 串 ， 用 于 描述 错误 信息 ， 更 直观 地 反映 了 错误 的 原因 。 以 下 代码 
显示 了 获取 地 理 位 置信 息 失败 时 的 错误 处 理 。 
function showError(error){ 
switch (error.code) 
{ 
Case error.PERMISSION DENIED: 
console .1og ("用 户 拒 绝对 获取 地 理 位 置 的 请 求 。"); 
break; 
Case error.POSITION UNAVAILABLE: 
console.1og(" 位 置信 息 是 不 可 用 的 。") 7 
break; 
Case error.TIMEOUT: 
console .1og ("请 求 用 户 地 理 位 置 超时 。"); 
break; 
Case error.UNKNOWN ERROR: 
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console.1og(" 未 知 错误 。") 7 
break; 
} 
上 


options 参数 是 一 些 可 选 参数 列表 。 这 些 可 选 参数 包括 ; 


(1) enableHighAceuracy: 是 否 要 求 高 精度 的 地 理 位 置信 息 。 

(2) timeout: 获取 地 理 位 置信 息 的 超时 限制 ， 单 位 为 毫秒 ， 如 果 在 该 时 间 段 内 没有 获取 地 理 
位 置信 息 ， 则 返回 错误 信息 。 

(3) maximumAge: 对 地 理 位 置信 息 的 缓存 时 间 ， 单 位 为 毫秒 ， 在 这 段 时 间 内 获取 的 地 理 位 
置信 息 均 来 自 缓存 。 


下 面 通过 一 个 完整 的 例子 在 浏览 器 控制 台 输出 获取 的 所 有 地 理 位 置信 息 。 具 体 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>15.2.1</title> 
<script type="text/javascript" > 
if (navigator.geolocation){ 
navigator.geolocation.getCurrentPosition (showPosition, showError,{ 
enableHighAccuracy:false, 
timeout:60*1000*3, 
maximumAge:5000 
1D); 
}elsel{ 
console.1og ("您 的 浏览 器 不 支持 获取 地 理 位 置 。") ; 
} 
function showPosition(position){ 
console.1o0g ("纬度 : "+position.coords.latitude); 
console.10g ("经 度 : "+position.coords.longitude); 
console.1o0g ("海拔 : "+position.coords.altitude); 
console.1o0g ("经 纬度 精度 : "+position.coords.longitude); 
console .10g ("海拔 经 度 : "+position.coords.altitudeAccuracy); 
console.10g ("方位 : "+position.coords.heading); 
console.1o0g ("速度 : "+position.coords.speed); 
console.1og(" 时 间 惟 : "+position.timestamp); 
function showError(error)t{ 
switch (error.code) 
{ 
Case error.PERMISSION DENIED: 


console .10g ("用 户 拒 绝对 获取 地 理 位 置 的 请 求 。"); 


break; 
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Case error.POSITION UNAVAILABLE: 
console .1o0g ("位 置信 息 是 不 可 用 的 。"); 
break; 

Case error.TIMEOUT: 
console .10g ("请 求 用 户 地 理 位 置 超时 。") ; 
break; 

Case error.UNKNOWN ERROR: 
console .10g ("未 知 错误 。"); 
break; 

> 
</script> 
</head> 
<body> 
</body> 
</html> 


运行 这 段 代 码 后 ， 在 浏览 器 的 控制 台中 可 以 看 到 获取 的 地 理 位 置信 息 ， 如 下 图 所 示 。 


wnsareacnse > 人 
fs © DD localhost/13/13-1.htm 


QO Hements Netwerk Sources Trmelne Prefles Resourses Audits Eee 


15.2.3 ”watchPosition() 方 法 


getCurrentPosition0 方 法 用 于 获取 一 次 地 理 位 置信 息 。 如 果 要 持续 监视 用 户 当前 的 地 理 位 置信 
息 ， 则 需要 使 用 watchPosition0 方 法 。 该 方法 的 定义 如 下 : 


int watchPosition (onSuccess,onError,options); 


该 方法 的 三 个 参数 与 getCurrentPosition0 方 法 的 三 个 参数 相同 ， 而 返回 值 却 是 一 个 数字 ， 用 于 
确定 该 方法 的 唯一 标示 。 有 具体 使 用 方法 如 下 : 


if (navigator.geolocation){ 
watchId=navigator.geolocation.watchPosition (showPosition,showError); 


}elsef{ 


console.10g ("您 的 浏览 器 不 支持 获取 地 理 位 置 。") ; 
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15.2.4 ”clearPosition() 方 法 


clearPosition0 方 法 用 于 停止 监视 当前 用 户 的 地 理 位 置信 息 。 该 方法 需要 一 个 int 型 参数 ， 即 
watchPosition0 方 法 的 返回 值 。 


15.3 ”实例 : 在 地 图 中 显示 地 理 位 置 


以 上 介绍 了 如 何 获取 用 户 当前 的 地 理 位 置信 息 ， 但 是 获取 的 位 置信 息 都 是 一 些 数字 ， 如 何 让 
这 些 数字 转换 成 具有 实际 意义 的 信息 呢 , 这 就 需要 使 用 到 地 图 API。 目前 可 以 使 用 的 地 图 API 有 很 
多 ， 如 Google Map API、Baidu Map API 等 。 本 节 将 以 Google Map API 为 例 ， 介 绍 如 何在 地 图 中 
显示 用 户 的 地 理 位 置 。 

在 HTML 页 面 中 使 用 Google 地 图 , 首先 需要 引入 Google Map API 的 脚本 文件 。 相关 代码 如 下 : 

<script type="text/javascript" src="http://maps.google.com/maps/api/ 
js?sensor=false" ></script> 


引入 脚本 文件 后 ， 需 要 根据 当前 用 户 的 经 纬度 坐标 确定 一 个 点 。 相 关 代 码 如 下 : 
Var coords = position.coords; 
var latlng = new google.maps.LatLng( 
coords.1latitude, // 纬度 
coords .longitude // 经 度 
js 


我 们 将 这 个 点 作为 地 图 的 中 心 点 ， 并 设置 地 图 放大 倍数 为 12， 设 置地 图 类 型 为 ROADMAP。 
相关 代码 如 下 : 
Var myOptions = { 
zoom: 12, // 地 图 放大 倍数 
center: latlng, // 地 图 中 心 设 为 指定 坐标 点 
mapTypeId: google.maps.MapTypeId.ROADMAP // 地 图 类 型 
] 7 


设置 以 上 参数 后 ， 我 们 可 以 创建 一 个 地 图 对 象 ， 并 指定 该 对 象 显示 在 页 面 中 id 为 “map” 的 
div 元 素 中 。 相 关 代码 如 下 : 
Var myMap = new google.maps.Map( 
document .getElementById ("map"),myOptions 
); 


接 下 来 我 们 为 地 图 创建 一 个 标记 ， 用 于 标记 出 用 户 当 前 的 地 理 位 置 。 相 关 代 码 如 下 : 
Var marker=new google.maps.Marker({ 
position: latlng, 
map: myMap 
Ds; 
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除了 地 图 标记 外 ， 还 可 以 为 标记 设置 标注 窗口 并 添加 注释 文字 。 相 关 代码 如 下 : 
var infowindow=new google.maps.InfoWindow({ 
content :" 您 在 这 里 <br/> 纬 度 : " + coords.latitude + 
"<br/> 经 度 : "+coords .longitude 
]) 7 


最 后 需要 将 创建 的 标注 窗口 显示 出 来 。 相 关 代码 如 下 : 


infowindow.open (myMap, marker); 


这 样 就 完成 了 从 地 理 位 置信 息 到 地 图 信息 的 转换 。 完 整 的 示例 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>15.3.1</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/ 
js?sensor=false" ></script> 
<script type="text/javascript"> 
navigator.geolocation.getCurrentPosition (function (Position)1{ 
Var coords = position.coords; 
var latlng = new google.maps.LatLng( 
coords .latitude， // 纬度 
coords .longitude // 经 度 
) 7 
Var myOptions = { 


zoom: 12, // 地 图 放大 倍数 
center: latlng, // 地 图 中 心 设 为 指定 坐标 点 


mapTypeId: google.maps.MapTypeId.ROADMAP // 地 图 类 型 
}; 
// 创建 地 图 并 输出 到 页 面 
Var myMap = new google.maps.Map( 
document .getElementById ("map"),myOptions 
); 


// 创建 标记 
Var marker = new google.maps.Marker ({ 
position: latlng, // 标注 指定 的 经 纬度 坐标 点 
map: myMap // 指定 用 于 标注 的 地 图 
Ds; 
// 创 建 标注 窗口 


Var infowindow = new google.maps.InfoWindow({ 
content:" 您 在 这 里 <br/> 纬 度 : "+ 
coords.latitudet+ 
"<br/> 经 度 : "+coords .1ongitude 
DD); 
// 打 开标 注 窗口 
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infowindow.open (myMap,marker); 
Ds 
</script> 
</head> 
<body> 
<div id="map" style="width:800px; height:600px"></div> 
</body> 
</html> 


运行 这 段 代 码 后 ， 在 浏览 器 中 将 显示 Google 地 图 及 当前 用 户 所 在 位 置 ， 效 果 如 下 图 所 示 。 由 


于 根据 人 P 地 址 获取 地 理 位 置信 息 会 有 比较 大 的 误差 ， 所 以 在 地 图 上 显示 的 位 置 并 非 用 户 当 前 真正 
的 地 址 ， 如 果 想 获取 更 为 精确 的 地 址 ， 就 需要 选择 误差 更 小 的 GPS 或 移动 网 络 方式 获取 地 理 位 置 。 
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测试 题 


(1) 地 理 位 置 定位 的 方式 有 哪些 ? 

(2) HIML5 中 如 何 实现 地 理 位 置 定位 ? 

(3) 如 何 检测 浏览 器 是 否 支持 地 理 位 置 定位 ? 

(4) getCurrentPosition 方法 有 几 个 参数 ? 含义 分 别 是 什么 ? 
(5) 在 地 图 中 显示 地 理 位 置 需要 哪些 操作 ? 


15.4 ”本 章 小 结 


本 章 主 要 介绍 了 HTML5 中 地 理 位 置 API 的 使 用 方法 ， 通 过 本 章 的 学 习 ， 读 者 应 该 熟练 掌握 
Geolocation API 的 使 用 方法 , 尤其 是 getCurrentPosition 、watchPosition 和 clearPosition 方法 的 使 用 ， 
并 能 通过 Google Map API 在 页 面 上 创建 地 理 位 置信 息 。 


History API 


我 们 平时 上 网 浏览 网 页 时 ， 浏 览 器 都 会 将 浏览 的 每 一 个 页 面 地 址 保存 在 历史 记录 中 ， 这 样 就 
可 以 通过 浏览 器 的 后 退 和 前 进 按钮 ， 在 浏览 过 的 网 页 之 间 进 行 切换 。History API 用 于 对 这 些 历史 
记录 进行 控制 和 管理 ， 换 言 之 ， 我 们 可 以 使 用 History API 控制 浏览 器 的 显示 。 


16.1 History API 概述 


History API 在 HTML5 之 前 就 已 经 存在 。History 是 一 个 全 局 对 象 ， 可 以 使 用 window.history 
调用 该 对 象 。 在 HIML4 中 ，History 的 length 属性 用 于 获取 浏览 器 的 历史 记录 数 ，back0 方 法 用 于 
返回 上 一 页 ，forward0 方 法 用 于 前 进 下 一 页 ，go0 方 法 用 于 前 进 或 后 退 到 指定 页 面 ， 其 参数 是 一 个 
数字 ， 如 果 是 正 数 ， 则 为 前 进 ， 如 果 是 负数 ， 则 为 后 退 ， 如 果 不 写 或 为 0， 则 刷新 当前 页 。 

在 HTML5 中 ，History API 又 新 增加 了 pushState() 和 replaceState() 两 个 方法 ,分别 用 于 增加 历 
史记 录 和 蔡 换 历史 记录 。 另 外 还 增加 了 popstate 事件 ， 用 于 处 理 对 历史 记录 的 更 改 。 


16.2 为 什么 要 用 History API 


既然 浏览 器 已 经 有 了 前 进 和 后 退 的 功能 ， 那 么 为 什么 还 要 使 用 History API 呢 ? 让 我 们 来 观察 
这 样 一 个 场景 ， 在 一 个 视频 播放 的 页 面 上 ,用 户 正 在 浏览 有 关 视 频 的 评论 信息 ， 由 于 评论 很 多 ,所 
以 采用 了 分 页 处 理 。 为 提升 用 户 体验 ， 网 站 采用 了 Ajax 技术 ， 用 户 每 次 单 击 下 一 页 按钮 时 ， 页 面 
只 刷新 评论 的 内 容 ， 当 用 户 浏览 到 第 4 页 时 ,忽然 想到 第 3 页 看 过 的 一 条 评论 信息 ， 于 是 单 击 了 浏 
览 器 的 后 退 按钮 ， 此 时 悲剧 就 发 生 了 ， 整 个 页 面 都 重新 刷新 了 一 次 ， 看 了 一 半 的 视频 又 开始 重新 播放 。 

为 了 避免 发 生 类 似 的 悲剧 ，HIML5 的 History API 提供 了 很 好 的 解决 方法 。 使 用 pushStateO 
方法 将 所 包括 Ajax 局 部 刷新 时 的 浏览 记录 保存 起 来 ， 或 者 使 用 replaceState0 方 法 蔡 换 当前 浏览 
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中 的 历史 记录 ， 这 样 当 单 击 浏览 器 的 后 退 或 前 进 按 钮 时 ， 就 可 以 实现 无 刷新 的 跳 转 。 
16.3 如何 使 用 History API 


目前 各 主流 浏览 器 对 History API 的 支持 是 非常 不 错 的 ， 为 了 用 编程 的 方式 确定 浏览 器 是 否 支 
持 这 个 API， 可 以 使 用 下 面 的 代码 进行 检测 。 
if (window.history && history.pushState){ 
console.1og(" 您 的 浏览 器 支持 History API."); 
J}elsel{ 
console.1o0g ("您 的 浏览 器 不 支持 History API."); 
} 


如 果 浏 览 器 不 支持 History API， 还 可 以 在 以 下 地 址 下 载 historyjs 代替 。 
https://github.com/browserstate/history.js/ 


HTMLS5 为 History API 提供 了 两 个 新 方法 和 一 个 事件 ， 新 方法 和 事件 的 配合 使 用 ， 就 可 以 实 
现 Ajax 无 刷新 的 后 退 和 前 进 功能 。 新 方法 和 事件 的 介绍 如 下 。 


(1) pushState(data,title,ur])): 向 历史 记录 的 顶部 添加 一 条 记录 。data 为 一 个 对 象 或 null, 会 在 
触发 window 的 popstate 事件 (window.onpopstate) 时 ， 作 为 参数 的 state 属性 传递 ，title 为 页 面 的 
标题 ,但 目前 所 有 浏览 器 都 忽略 这 个 参数 ，url 为 页 面 的 URL， 不 写 则 为 当前 页 面 。 

(2) replaceState(data,title,url): 更 改 当前 页 面 的 历史 记录 。 参 数 与 pushState 参数 相同 。 

(3) popstate 事件 ， 当 浏览 历史 记录 时 ,无论 是 单 击 前 进 或 后 退 按钮 ， 还 是 使 用 history.go 和 
history.back 方法 ， 或 者 使 用 pushState 和 replaceState 方法 ， 都 会 触发 popstate 事件 。 


16.4 实例 : 浏览 历史 记录 


本 例 通过 编程 的 方式 实现 浏览 历史 记录 的 功能 ， 通 过 单 击 页 面 上 的 前 进 与 后 退 按钮 (注意 不 
是 浏览 器 的 前 进 与 后 退 按钮 )， 实 现 浏 览 历史 记录 的 跳 转 。 另 外 ， 通 过 单 击 页 面 上 的 跳 转 按 钮 ， 跳 
转 到 指定 的 历史 记录 页 面 。 我 们 先 来 看 一 下 HTML 页 面 代码 。 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>16.4.1</title> 

<script language="javascript"> 

function goBack(){ 

history.back(); 
. 
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function goForward(){ 


history.forward(); 


} 
functi 


on goIndex(){ 


Var index=document .getElementById("num") .value; 


history.go (index); 


} 


</script> 


</head: 


<body> 


> 


<h1> 第 一 页 </h1> 


<h2> 

<a hre 
<a hre 
<a hre 
</h2> 
<input 
<input 


f="pagel.html">pagel</a> 
f="page2.html">page2</a> 
f="page3.html">page3</a> 


type="button” value=" 后 退 ”onClick="goBack()"/> 
type="button” value=" 前 进 " onClick="goForward()"/><br><br> 


跳 转 <input type="number" id="num" /><input type="button" value="Go" 
onClick="goIndex () "/> 
</body> 


</html: 


本 示例 中 总 共有 三 个 HIML 页 面 ， 分 别 为 pagel.html、page2.html 和 page3.html， 这 三 个 HIML 页 
面 中 除了 <h1> 元 素 中 的 内 容 不 同 ， 其 他 的 代码 完全 相同 。 运 行 这 段 代码 后 可 以 看 到 如 下 的 HTML 界面 。 


第 一 页 


pagel page2 page3 


| 证 
趴 转 Go 


依次 单 击 “pagel ”“page2 ”和 “page3 ”三 个 链接 ， 这 样 浏 览 器 就 记录 了 我 们 的 浏览 记录 。 
当前 页 面 地 址 显示 为 第 三 页 ， 单 击 后 退 按钮 ， 此 时 调用 history.back() 方 法 返回 上 一 个 浏览 页 面 ， 也 


就 是 第 二 页 


， 这 与 我 们 单 击 浏览 器 上 的 后 退 按钮 是 一 样 的 效果 。 单 击 前 进 按钮 ， 此 时 调用 


history.forward0 方 法 向 前 浏览 一 个 页 面 ,又 回 到 了 第 三 页 ,这 与 我 们 单 击 浏览 器 上 的 前 进 按钮 是 一 
样 的 效果 。 最 后 在 数字 框 中 输入 -1， 并 单 击 Go 按钮 ， 又 返回 上 一 个 浏览 的 页 面 (第 二 页 ) ， 再 输 


入 1， 并 单 


二 Go 按钮 ， 又 返回 到 第 三 页 。 


提 示 


在 调用 history.go() 方 法 时 ， 如 果 输入 的 参数 为 正 数 ， 则 向 前 浏览 ; 如 果 输 入 的 参数 为 
负数 ， 则 向 后 浏览 ; 如 果 输入 的 参数 为 0 或 不 输入 参数 或 浏览 记录 小 于 输入 参数 的 绝 
对 值 ， 则 刷新 当前 页 面 。 
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16.5 ”实例 : 添加 与 修改 历史 记录 


本 节 将 通过 具体 的 实例 介绍 HIMLS 中 History API 新 增 的 pushState0 和 replaceState() 方 法 , 以 
及 popstate 事件 。 本 例 中 ， 我们 会 看 到 一 个 链接 列表 和 一 个 div， 当 单 击 相应 的 链接 时 ，div 中 将 显 
示 对 应 的 文字 ， 地 址 栏 中 的 地 址 也 会 跟着 变化 ， 当 单 击 浏览 器 的 后 退 或 前 进 按钮 时 ，div 中 的 文字 
和 地 址 栏 中 的 地 址 也 要 相应 的 变化 。 我 们 先 来 看 一 段 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>16.5.1</title> 
<style> 
#1ist { 
float: left; 
list-style: none; 


} 
#content { 
margin-left: 80px; 
float: left; 
width: 260px; 
height: 100px; 
border: 5px solid #ccc; 
font-size: 24px; 
} 
</style> 
<script language="javascript"> 
if (window.history && history.pushSstate){ 
console.1o0g ("您 的 浏览 器 支持 History API."); 
}elsel{ 
console.1o0g ("您 的 浏览 器 不 支持 History API."); 
} 
function show(obj){ 
Var content=document .getElementById("content"); 
content .innerHTML=" 您 选择 的 是 : "+obj .innerText; 
} 
</script> 
</head> 
<body> 
<ul id="list"> 
<li><a href="#1"” onClick="show (this)"> 星 期 一 </a></1i> 
<li><a href="#2" onClick="show (this)"> 星 期 二 </a></1i> 
<li><a href="#3"” onClick="show (this)"> 星 期 三 </a></1i> 
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<li><a href="#4"” onClick="show (this)"> 星 期 四 </a></1i> 
<li><a href="#5"” onClick="show (this)"> 星 期 五 </a></1i> 
</ul> 
<div id="content"> </div> 
</body> 
</html> 


运行 这 段 代 码 后 ,依次 单 击 左边 的 列表 ， 在 右边 的 div 中 将 显示 对 应 的 文字 ， 地 址 栏 中 的 地 址 
会 跟着 变化 。 但 是 当 单 击 浏览 器 的 后 退 按钮 时 ， 只 有 地 址 栏 中 的 地 址 变化 了 ，div 中 的 文字 却 没 
有 变化 ， 效 果 如 下 图 所 示 ， 这 并 不 是 我 们 想 要 的 结果 。 


€ 3 © CD localhost/14/indexl.html#2 


您 选择 的 是 : 星期 二 


虽然 浏览 器 记录 了 我 们 浏览 过 的 地 址 ， 但 是 当 我 们 后 退 或 前 进 时 ， 页 面 中 的 内 容 并 没有 刷新 。 
要 实现 希望 的 结果 ， 就 需要 用 到 HTML5 中 History API 新 增 的 方法 和 事件 。 我 们 对 以 上 代码 进行 
了 改进 ， 有 具体 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>16.5.2</title> 
<style> 
SEE 
float: left; 
list-style: none; 
} 
#content { 
margin-left: 80px; 
float: left; 
width: 260px; 
height: 100px; 
border: 5px solid #ccc; 
font-size: 24px; 
} 
</style> 
<script language="javascript"> 


if (window.history && history.pushSstate){ 
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console.1o0g ("您 的 浏览 器 支持 History API."); 
}elsef{ 
console.10g ("您 的 浏览 器 不 支持 History API."); 
} 
Var historys=[]; 
function show(obj){ 
Var content=document .getElementById("content"); 
content .innerHTML=" 您 选择 的 是 : "+obj .innerText; 
Var data={ 
hash:obj.href, 
text:content.innerHTML 
}; 
addHistory (data); 
} 
window.onpopstate = function(e){ 
if(e.state){ 
Var content=document .getElementById ("content"); 
content .innerHTML=e. state.text; 


} 
function addHistory (obj){ 
if (historys.indexOf (obj .hash)==-1){ 
historys.push (obj .hash); 
window.history.pushState (obj,"",obj.hash); 
}elsef{ 
window.history.replaceState (obj,"",obj.hash); 


} 

</script> 

</head> 

<body> 

<ul id="list"> 
<li><a href="#1"” onClick="show (this)"> 星 期 一 </a></1i> 
<1i><a href="#2" onClick="show (this)"> 星 期 二 </a></1i> 
<li><a href="#3"” onClick="show (this)"> 星 期 三 </a></1i> 
<li><a href="#4"” onClick="show (this)"> 星 期 四 </a></1i> 
<li><a href="#5"” onClick="show (this)"> 星 期 五 </a></1i> 

</ul> 

<div id="content"> </div> 

</body> 

</html> 


我 们 先 声明 一 个 全 局 的 historys 数组 ， 用 于 存放 访问 过 的 历史 地 址 ， 当 单 击 链接 时 ， 获 取 链 接 


对 象 的 href 属性 ， 将 其 与 div 中 的 内 容 组 成 一 个 data 对 象 ， 然 后 调用 addHistory0 方 法 。 在 这 个 方 
法 中 ， 先 判断 historys 数组 中 是 否 存在 当前 链接 ， 如 果 不 存在 ， 就 将 当前 链接 添加 到 数组 ， 同 时 调 


228 | HTML5+CSS3+JavaScript 前 端 开发 基础 


用 pushState0 方 法 为 浏览 器 添加 一 个 历史 记录 ; 如 果 historys 数组 中 不 存在 当前 链接 ， 就 调用 
TeplaceState( 方 法 蔡 换 浏览 器 中 的 历史 记录 。 最 后 为 onpopstate 事件 添加 函数 ， 当 该 事件 触发 时 ， 
我 们 将 对 应 的 内 容 赋 给 div， 这 样 就 实现 了 本 例 的 所 有 功能 。 

测试 题 


(1) HIML5 中 History API 新 增 了 哪些 方法 和 事件 ? 
(2) 如 何 检测 浏览 器 是 否 支持 History? 

(3) history.go0 方 法 的 参数 是 正 数 还 是 负数 ? 

(4) history.pushStat0 方 法 有 几 个 参数 ? 


16.6 本章 小 结 


本 章 主要 介绍 了 HTML5 中 History API 的 使 用 方法 ， 通 过 本 章 的 学 习 ， 读 者 应 该 熟练 掌握 
history 对 象 的 使 用 方法 ， 能 够 通过 编程 的 方式 控制 浏览 器 的 后 退 、 前 进 和 跳 转 ， 能 够 实现 浏览 
地 址 和 页 面 的 Ajax 刷新 ， 以 及 掌握 History API 新 增 方法 和 事件 的 使 用 方法 。 


CSS 基础 知识 


CSS 与 HTML 的 发 展 紧密 结合 ， 两 者 相辅相成 ， 如 果 将 HTML 比喻 成 颈 干 ， 那 么 CSS 就 是 
华丽 的 外 衣 。CSS 从 最 初 只 包含 颜色 、 背 景 、 文 字 等 相关 属性 ， 发 展 到 可 以 使 用 样式 表 结构 ， 再 
到 现在 的 CSS3， 可 以 说 有 了 突飞猛进 的 发 展 。 从 本 章 开 始 ， 我 们 将 对 CSS 进行 系统 的 介绍 。 


17.1 CSS 概述 


在 学 习 CSS 之 前 ,我 们 先 对 CSS 进行 大 概 的 介绍 ， 让 大 家 了 解 什么 是 CSS，CSS 的 发 展 经 历 
了 哪些 重要 的 版 本 ，CSS 有 什么 特点 ， 与 浏览 器 是 什么 关系 ， 最 后 为 大 家 提供 一 些 精美 的 CSS 站 


17.1.1 CSS 简介 


CSS 是 英文 Cascading Style Sheet 的 缩写 ， 也 叫 作 “ 层 又 样式 表 ”。CSS 经 历 了 多 个 版 本 的 发 
展 , 最 新 版 本 是 CSS3, 是 由 Adobe Systems、Apple、Google、 HP、IBM、 Microsoft、 Mozilla、Opera、 
Sun Microsystems 等 许多 Web 界 的 巨头 联合 组 成 的 名 为 “CSS Working Group” 的 组 织 共同 协商 策 
划 的 。 目 前 CSS3 还 在 完善 很 多 细节 ， 但 是 HIML5 和 CSS3 已 经 成 为 Web 发 展 的 大 趋势 ， 越 来 越 
多 的 用 户 正在 使 用 HIML5 和 CSS3 开发 属于 它们 的 新 页 面 。 


17.1.2 CSS 历史 


CSS 的 发 展 主要 经 历 以 下 了 几 个 发 展 阶段 。 


(1) CSS 1: CSS 1 于 1996 年 12 月 正式 推出 ， 在 该 版 本 中 提供 了 有 关 文 字 、 颜 色 、 位 置 文本 
属性 等 基本 信息 。 
(2) CSS 2: CSS 2 于 1998 年 5 月 正式 推出 ， 该 版 本 中 可 以 使 用 样式 表 结 构 对 网 页 效果 进行 
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统一 编排 ， 这 样 程序 员 开发 时 就 可 以 不 考虑 显示 和 界面 ， 只 关注 功能 的 实现 ， 显 示 问 题 由 样式 表 结 
构 统 一 完成 。 

(3) CSS 2.1: CSS 2.1 于 2004 年 2 月 正式 推出 ， 该 版 本 在 CSS 2 的 基础 上 稍微 进行 了 改动 ， 
剔除 了 一 些 不 被 浏览 器 支持 的 属性 。 

(4) CSS3: CSS3 目前 还 没有 正式 推出 ， 仍 处 于 完善 阶段 。CSS3 是 一 个 全 新 的 版 本 ， 它 将 许 
多 复杂 的 样式 进行 了 模块 划分 ， 同 时 还 加 入 了 更 多 新 的 模块 。 


17.1.3 CSS 特点 


如 果 网 页 设计 者 想 设计 出 符合 要 求 的 网 页 ， 就 需要 借助 CSS 的 功能 ， 精 确定 位 页 面 上 的 各 个 
元 素 ， 让 它们 根据 设计 者 的 要 求 进行 编排 和 展示 。 除 此 之 外 ，CSS 还 具有 以 下 几 个 特点 : 


(1) 统一 蔡 换 样式 。 使 用 样式 表 可 以 为 单个 页 面 上 的 相同 元 素 ， 或 者 整个 站 点 上 的 相同 页 面 
设置 统一 的 样式 ， 这 样 有 助 于 建立 站 点 的 风格 ， 在 更 换 页 面 或 站 点 的 风格 时 也 非常 方便 。 

(2) 分 离 页 面 的 表示 层 与 结构 层 。HTML 元 素 是 页 面 的 结构 ，CSS 可 以 控制 页 面 的 效果 ， 样 
式 表 分 离 了 页 面 的 结构 层 和 表示 层 , 这样 程序 员 可 以 更 专注 页 面 结构 , 而 页 面 效 果 则 由 美工 来 完成 。 

(3) 减少 了 页 面 大 小 。 早 期 的 HTML 与 CSS 都 在 一 个 页 面 上 混合 着 ， 页 面 结构 很 不 清晰 ， 
定位 一 个 元 素 或 修改 一 个 样式 都 比较 困难 ， 样 式 表 的 分 离 减少 了 页 面 上 很 大 一 部 分 内 容 。 

(4) 加 快 了 页 面 加 载 速度 。 我 们 在 浏览 网 页 时 ， 网 页 上 的 内 容 都 会 经 过 浏览 器 进行 解析 ， 在 
这 个 过 程 中 需要 从 服务 端 加 载 页 面 ， 分 离 样式 表 后 ， 由 于 页 面 减 小 了 ， 所 以 加 载 速度 也 提升 了 。 


17.1.4 ”CSS 与 浏览 器 的 关系 


浏览 器 用 于 对 页 面 元 素 进行 解析 ， 对 解析 的 结果 进行 泻 染 ， 最 终 呈 现 给 用 户 ， 而 CSS 正 是 浏 
览 器 解析 的 一 部 分 。 不 同 厂 家 、 不 同 版 本 的 浏览 器 , 对 于 同一 个 页 面 元 素 解析 的 结果 可 能 存在 差异 ， 
比如 Firefox 设置 padding 后 ，div 会 增加 height 和 width， 但 正 不 会 ， 所 以 需要 用 !important 多 设 
置 一 个 height 和 width。 另 外 ， 台 式 电脑 、 笔 记 本 电脑 、 平 板 电脑 和 智能 手机 的 浏览 器 也 有 差别 ， 
相同 的 一 个 页 面 ， 在 台式 电脑 和 智能 手机 上 显示 的 效果 有 很 大 差别 。 

CSS 是 表现 页 面 效果 的 一 个 标准 ， 其 随 着 互联 网 技术 的 发 展 在 不 断 改进 ， 而 浏览 器 厂商 也 根 
据 CSS 发 展 的 趋势 ， 不 断 改 进 浏览 器 对 CSS 的 兼容 性 。 尤 其 在 CSS3 中 ， 采 用 了 分 工 协作 的 模块 
化 结构 , 这 让 浏览 器 厂商 根据 不 同 的 硬件 , 开发 支持 不 同 模块 的 浏览 器 , 以 便 适 应 更 好 的 展现 效果 。 


17.1.5 ”CSS 站 点 欣赏 


以 下 提供 了 几 个 精美 的 CSS 网 页 设计 供 大 家 欣赏 。 
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一 zlololol 三 9 胡 世人 吕 人 
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17.2 基本 CSS 选择 器 


选择 器 (selector) 是 CSS 中 很 重要 的 概念 ， 是 HTML 标记 与 样式 的 纽带 ， 具 有 一 套 完整 的 规 
则 。 在 CSS 中 ， 有 各 种 不 同类 型 的 选择 器 可 以 选择 ， 本 节 主 要 介绍 三 种 基本 的 CSS 选择 器 ， 即 标 
记 选 择 器 、 类 别 选 择 器 和 ID 选择 器 。 
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17.2.1 标记 选择 器 


Web 页 面 的 框架 由 HTML 元 素 的 标记 组 成 ，CSS 标记 选择 器 就 是 用 来 声明 各 个 元 素 的 标记 使 
用 哪 种 CSS 样式 ，HIML 中 的 每 一 个 标记 都 是 一 个 标记 选择 器 。 例 如 以 下 的 CSS 声明 了 页 面 中 所 
有 hl 标记 的 字体 颜色 为 红色 。 
<style> 
a 
color: red; 


} 
</style> 


其 中 hl 表示 HTML 页 面 中 的 hl 元 素 ， 也 是 标记 选择 器 的 名 称 ，color 是 标记 的 属性 ，red 是 
属性 值 。 如 果 要 为 hl 设置 多 种 样式 ， 可 以 在 属性 和 值 后 面 继续 添加 其 他 属性 和 值 ， 中 间 以 分 号 隔 
开 。 例 如 以 下 的 CSS 声明 了 页 面 中 所 有 hl 标记 的 字体 颜色 为 红色 ， 字 体 大 小 为 24px。 

<style> 

a 

color: red; 
font-size:24px; 


} 
</style> 


17.2.2 ”类 别 选择 器 


页 面 中 一 旦 设置 了 标记 选择 器 ， 那 么 页 面 中 所 有 该 标记 的 元 素 都 将 具有 相同 的 样式 。 例 如 为 
<p> 元 素 设置 标记 选择 器 样式 如 下 : 
<style> 
pt 
color:red; 
font-size:18px; 
} 
</style> 


这 样 页 面 中 所 有 的 <p> 元 素 都 显示 为 红色 ， 字 体 大 小 均 为 18px。 如 果 此 时 页 面 中 某 一 个 <p> 元 
素 需 要 显示 为 蓝 色 ， 那 么 单纯 使 用 标记 选择 器 就 无 能 无 力 了 ， 可 以 使 用 类 别 (class) 选择 器 。 
类 别 选 择 器 的 声明 与 标记 选择 器 的 声明 类 似 ， 区 别 在 于 类 别 选择 器 的 名 称 可 以 自 定义 ， 且 名 
称 前 必须 有 一 个 点 号 。 例 如 声明 一 个 类 别 选择 器 如 下 : 
<style> 
.bluef{f 
color:blue; 
font-size:30px; 
} 
</style> 
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类 别 选择 器 在 使 用 时 需要 设置 HTML 元 素 的 class 属性 ， 并 指定 属性 值 为 类 别 选 择 器 的 名 称 ， 
注意 属性 值 不 带 点 号 。 具 体 使 用 方法 如 下 : 
<p class-"blue"> 这 是 类 别 选择 器 </p> 


类 别 选 择 器 的 使 用 不 局 限于 某 一 个 元 素 标记 ， 而 是 适用 于 所 有 具有 class 属性 的 元 素 标记 。 例 
如 以 上 为 <p> 元 素 设置 的 类 别 选 择 器 同样 可 以 作用 于 <h1> 元 素 ， 使 用 方法 如 下 : 
<hl class="blue"> 这 里 也 可 以 使 用 类 别 选择 器 </h1> 
下 面 通过 一 个 完整 的 示例 来 看 一 下 类 别 选 择 器 的 使 用 方法 。 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>17.2.1</title> 
<style> 
.red{ 
color:red; 
font-size:24px; 
} 
.blue{ 
color:blue; 
font-size:30px; 
} 
</style> 
</head> 
<body> 
<p class="red"> 红 色 字 段 </p> 
<p class="blue"> 蓝 色 字段 </p> 
<hl class="blue">Hl 蓝 色 字段 </h1> 
</body> 
</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 


[EE] 
€ 3 C Dlocahost/is/class htn 


红色 字段 
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类 别 选 择 器 可 以 为 任何 具有 class 属性 的 元 素 设置 样式 ， 当 页 面 中 包含 多 个 相同 元 素 ， 大 部 分 
元 素 使 用 相同 样式 , 个 别 元素 使 用 不 同样 式 时 ,可 以 先 使 用 标记 选择 器 为 所 有 元 素 设置 样式 , 再 使 
用 类 别 选择 器 为 个 别 元 素 设置 不 同样 式 。 例 如 下 面 这 段 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>17.2.2</title> 

<style> 

pt 

color:blue; 
font-size:24px; 

3} 

.red{ 

color:red; 
font-size:30px; 

} 

</style> 

</head> 

<body> 

<p> 默 认 段落 样式 </p> 

<p> 默 认 段 落 样式 </p> 

<Pp> 默 认 段落 样式 </P> 

<p class="red"> 特 殊 段 落 样式 </p> 

<p> 默 认 段 落 样式 </P> 

<p> 默 认 段 落 样式 </p> 

<p> 默 认 段 落 样式 </p> 

</body> 

</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 


EE 
¢ © Dlochosn s/chrs2 hom 


默认 段落 样式 


另外 ， 还 可 以 为 同一 个 元 素 应 用 多 个 类 别 选择 器 ， 这 样 可 以 使 该 元 素 具有 多 种 不 同 风格 的 样 
式 。 首 先 需 要 定义 多 个 类 别 选择 器 ， 然 后 为 同一 个 元 素 设置 多 个 class 属性 值 ， 注 意 属性 值 之 间 用 
空格 分 隔 。 示 例 代 码 如 下 : 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>17.2.3</title> 
<style> 
.red{ 
color:red; 
font-size:24px; 
} 
.bluef{ 
color:blue; 
font-size:30px; 
} 
</style> 
</head> 
<body> 
<p class="red"> 使 用 第 一 种 样式 </p> 
<p class="blue"> 使 用 第 二 种 样式 </p> 
<p class="red blue"> 使 用 两 种 样式 </p> 
</body> 
</html> 


运行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 


GE 
€ 3 © | localhost/15/class3 htm 


使 用 第 一 种 样式 
使 用 第 二 种 样式 
使 用 两 种 样式 


试 一 试 : 在 使 用 两 种 样式 时 ， 如 果 将 class="red blue" 换 成 class="blue red"， 运 行 效果 会 有 什么 
变化 ? 如 果 将 red 类 别 选 择 器 和 blue 类 别 选择 器 调换 位 置 , 运行 效果 会 有 什么 变化 ? 有 兴趣 的 读者 
可 以 尝试 一 下 。 


17.2.3 ID 选择 器 


与 类 别 选择 嚣 一样 , ID 选择 器 是 通过 HTML 元 素 的 ZD 属性 来 声明 CSS 样式 。ID 选择 的 名 称 
可 以 自 定义 ， 但 名称 必须 添加 前 级 #。 例 如 下 面 这 段 代 码 : 
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<style> 
#red{ 
color:red; 
font-size:24px; 
} 
</style> 


在 Web 页 面 中 ， 相 同 ID 的 HTML 元 素 可 以 同时 存在 ， 浏 览 器 在 解析 时 并 不 会 出 现 问题 ， 但 


是 如 果 页 面 中 的 JavaScript 根据 document.getElementById("ID") 定 位 元 素 时 ， 就 无 法 准确 定位 到 元 


素 。 


例如 下 面 这 段 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>17.2.4</title> 
<style> 
#red{ 
color:red; 
font-size:24px; 
} 
</style> 
<script language="javascript"> 
window.onload=function (){ 
Var aa=document .getElementById("red"); 
console.1log (aa.innerHTML); 
} 
</script> 
</head> 
<body> 
<p id-"red"> 第 一 个 ID 选 择 器 </p> 
<p id="red"> 第 二 个 ID 选 择 器 </p> 
</body> 
</html> 


运行 这 段 代码 后 ， 浏 览 器 控制 台 只 能 输出 第 一 个 ID 选择 器 为 red 的 元 素 内 容 ， 并 不 能 输出 所 


有 了 为 red 的 元 素 内 容 。 所 以 ，ID 选择 器 比 类 别 选择 器 更 具有 针对 性 。 对 于 网 页 编写 者 而 言 ， 要 
养 成 良好 的 编码 规范 ， 一 个 ID 只 能 赋予 一 个 HIML 元 素 。 


试 一 试 : 既然 可 以 为 同一 个 HTML 元 素 使 用 多 个 类 别 选择 器 ,那么 能 否 为 同一 个 HIML 元 素 


使 用 多 个 ID 选择 器 呢 ? 有 兴趣 的 读者 可 以 试 一 试 。 
17.2.4 实例 : 应 用 基本 选择 器 


本 例 我 们 将 使 用 基本 选择 器 对 一 段 文字 的 样式 进行 设置 ， 显 示 后 的 效果 如 下 图 所 示 。 


第 17 章 CSS 基础 知识 | 237 


€ 3 GDlocalhosV15/demolhtml 


名 字 藏 头 诗 - 卢 俊 义 反 


相传 《水 游 传 》 中 梁山 为 了 拉 卢 俊 义 入 伙 ， 星 ” 吴 用 和 宋江 使 生出 一 段 “ 吴 用 智 取 玉 鹿 
鹿 ”的 故事 来 ， 利 用 卢 俊 义 正 为 躲避 “ 血 光 的 怪 恐 心理 ， 口 占 四 人 句 卦 歌 ， 暗 藏 “ 卢 俊 义 
反 ” 四 个 字 ， 结 果 ， 成 了 官府 治罪 的 证 据 ， 终 于 把 卢 俊 义 “ 带 ” 上 了 梁山 。 


芦花 从 中 一 扁舟 ， 俊 杰 俄 从 此 地 游 。 
义士 若 能 知 此 理 ， 反 躬 难 逃 可 无 忧 


在 这 段 文字 中 ， 标 题 显示 为 粗 体 ， 段 落 内 容 中 的 人 名 被 着 重 显示 ， 藏 头 诗 中 每 句 第 一 个 字 显 
示 为 红色 ， 字 体 稍 大 ， 诗 中 其 他 文字 的 样式 与 段落 中 人 名 使 用 相同 的 样式 。 完 整 的 示例 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>17.2.5</title> 


<style> 
pi 
font-size: 24px; 
3 
.bold text{ 
color:blue; 
font-weight:bold; 
font-size:24px; 
} 
span{ 
color:red; 
font-size:30px; 
上 


#show title{ 
text-align:center; 

下 

#content{ 
color:#212D25; 

让 

</style> 

</head> 

<body> 

<div id="show title"> 
<h1> 名 字 藏 头 诗 - 卢 俊 义 反 </h1> 


</div> 
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<div id="content" > 
<p> 相传 《水 浒 传 》 中 梁山 为 了 拉 <span class="bolqd text"> 卢 俊 义 </span> 入 伙 ， 
&ldquo; 智 多 星 &rdquo; <span class="bold text"> 吴 用 </span> 和 <span 
class="bold text"> 宋 江 </span> 便 生出 一 段 &ldquo; <span class="bold text"> 吴 用 </span> 
智 取 玉 麒 麟 srdquo; 的 故事 来 ， 利 用 <span class="bold text"> 卢 俊 义 </span> 正 为 躲避 &1dquo; 
血 光 之 灾 &rdquo; 的 必 恐 心理 ， 口 占 四 句 卦 歌 ， 暗 藏 sldquo;<span class="bold text"> 卢 俊 义 
</span> 反 &rdquo; 四 个 字 ， 结 果 ， 成 了 官府 治罪 的 证 据 ， 终 于 把 <span class="bold text"> 卢 俊 义 
</span>&ldquo; 台 &rdquo; 上 了 梁山 。</p> 
<p class="bold text"> <span> 芦 </span> 花 从 中 一 扁舟 ，<span> 俊 </span> 杰 俄 从 此 
地 游 。</p> 
<p class="bold text"> ”<span> 义 </span> 士 若 能 知 此 理 ，<span> 反 </span> 躬 难 逃 
可 无 忧 </P> 
</div> 
</body> 
</html> 


本 例 分 别 使 用 了 标记 选择 器 、 类 别 选择 器 和 ID 选择 器 完成 了 最 终 效果 ， 有 兴趣 的 读者 可 以 参 
照 本 例 进行 练习 。 


17.3 复合 选择 器 


复合 选择 器 是 针对 基本 选择 器 而 言 ， 由 两 个 或 多 个 基本 选择 器 通过 不 同 的 方式 连接 而 成 。 复 
合 选择 器 可 以 分 为 “交集 ”选择 器 、“ 并 集 ” 选 择 器 和 后 代 选 择 器 。 


17.3.1 “交集 ”选择 器 


“交集 ”选择 器 是 由 两 个 选择 器 直接 连接 构成 ， 其 结果 是 选中 各 自 元 素 范围 的 交集 。 其 中 第 
-个 必须 是 标记 选择 器 ， 第 二 个 必须 是 类 别 选择 器 或 ID 选择 器 ， 这 两 个 选择 器 之 间 不 能 有 空格 ， 
必须 连续 书写 。 示 例 代 码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>1l:301</title> 
<style> 
divt{ 
width:400px; 
height:100px; 
margin-left:50px; 
color:white; 
font-size:24px; 
font-weight:bold; 
text-align:center; 
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line-height:100px; 
background:green; 
3 
.red{ 
background:red; 
} 
.blue{ 
background:blue; 
} 
div.green{ 
color:black; 
} 
</style> 
</head> 
<body> 
<div class="red"> 红 底 白 字 </div> 
<div class="div green"> 绿 底 黑 字 </div> 
<div class="blue"> 蓝 底 白字 </div> 
</body> 
</html> 


运行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 


EE 和 
和 c localhost, 


红 底 白字 


“交集 ”选择 器 第 一 个 必须 是 标记 选择 器 ， 有 时 也 会 是 类 选择 器 ， 即 两 个 都 是 类 选择 器 ， 这 
种 情况 在 一 些 浏览 器 中 是 允许 的 ， 但 有 些 浏览 并 不 兼容 ， 如 果 必 须 使 用 ， 需 要 对 浏览 器 的 兼容 性 进 
行 充 分 测试 。 
17.3.2 “并 集 ” 选 择 器 

“并 集 ” 选 择 器 可 以 同时 选中 各 个 基本 选择 器 所 选择 的 范围 。 任 何 形式 的 选择 器 都 可 以 组 成 
“并 集 ” 选 择 器 ， 多 个 选择 器 通过 逗号 连接 。 其 格式 如 下 : 

<style> 


h2, .red, #green{ 
color:blue; 
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font-size:24px; 
} 
</style> 


由 于 “并 集 ” 选 择 器 包含 了 各 个 基本 选择 器 的 所 选 范围 ， 所 以 使 用 “并 集 ” 选 择 器 与 单独 使 
用 各 个 基本 选择 器 的 效果 是 一 样 的 。 完 整 的 示例 代码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>17.3.2</title> 
<style> 
h2,1i, .class,#idf{ 
color:blue; 
font-size:24px; 
} 
</style> 
</head> 
<body> 
<h2> 第 一 行 数据 </h2> 
<p class="class"> 第 二 行 数据 </p> 
<div id="id"> 第 三 行 数据 </div> 
</body> 
</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 


日 He 
¢ 3 © Dlocalhost/15/union html 


第 一 行 数据 
第 二 行 数据 
第 三 行 数据 


17.3.3 ”后 代 选 择 器 


HTML 元 素 之 间 可 以 嵌 套 ， 而 对 于 这 些 嵌 套 的 元 素 ，CSS 也 有 与 其 对 应 的 后 代 选 择 器 。 后 代 
选择 器 由 多 个 标记 选择 器 组 成 ， 但 是 又 不 同 于 “交集 ”选择 器 或 “并 集 ” 选 择 器 。 后 代 选 择 器 规定 
外 层 的 标记 写 在 前 面 ， 内 层 的 标记 写 在 后 面 ， 标 记 之 间 用 空格 分 隔 。 如 果 标 记 之 间 存在 嵌 套 关系 ， 
那么 内 层 的 标记 就 视 为 外 层 标记 的 后 代 。 示 例 代码 如 下 : 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<Eitle>E1 3 3</title> 
<style> 
p span{ 
color:red; 
} 
span{ 
color:green; 
上 
</style> 
</head> 
<body> 
<p> 属 套 <span> 标 记 </span> 的 颜色 </P> 
没有 峰 套 <span> 标 记 </span> 的 颜色 
</body> 
</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 


后 代 运 深 强 
人 © 口 localhost/15/childhtml 


其 套 标 记 的 颜色 
投 有 放 志 标记 的 颜色 


在 这 段 代码 中 ，<span> 元 素 中 的 内 容 相同 ， 但 是 第 一 个 <span> 元 素 与 <p> 元 素 嵌 套 ， 所 以 应 用 


了 后 代 选 择 器 ， 字 体 显示 为 红色 ; 而 第 二 个 <span> 元 素 没 有 嵌 套 ， 所 以 应 用 了 标记 选择 器 ， 字 体 显 
示 为 绿色 。 


试 一 试 : 需要 说 明 的 是 ， 因 为 HTML 元 素 可 以 多 级 嵌 套 ， 所 以 对 应 的 后 代 选 择 器 就 可 以 由 多 


个 标记 选择 器 组 成 ， 这 样 的 后 代 选 择 器 对 多 级 元 素 都 会 产生 影响 ， 读 者 不 妨 动手 试 一 试 。 
17.3.4 实例 : 应 用 复合 选择 器 


本 例 综合 使 用 以 上 介绍 的 三 种 选择 器 ， 即 在 一 个 页 面 上 呈现 三 种 选择 器 的 效果 。 相 关 代码 


<!gdoctype html> 
<html> 
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<head> 

<meta charset="utf-8"> 

<title>17.3.4</title> 

<style> 

div.bg{ 
color:blue; 
font-size:30px; 

> 

div,#small{ 
font-family:" 华 文 行 楷 "; 

} 

div span1{ 
font-size:24px; 

} 

</style> 

</head> 

<body> 

<div class="div bg"> 
交集 选择 器 控制 颜色 
<div class="div small"> 并 集 选 择 器 控制 字体 <span>&nbsp; snbsp; 后 代 选 择 器 控制 大 小 

</span></div> 

</div> 

</body> 

</html> 


在 这 段 代码 中 ,最 外 层 的 <div> 元 素 使 用 “交集 ”选择 器 ,控制 字体 的 颜色 和 全 局 字体 的 大 小 ， 
内 层 的 <div> 元 素 使 用 “并 集 ”选择 器 控制 字体 ， 最 内 层 的 <span> 元 素 与 外 层 的 <div> 元 素 岩 套 ， 使 
用 后 代 选 择 器 ， 控 制 <span> 元 素 内 字体 的 大 小 。 运 行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 


= 


BE 
© 9 localhost/15/demo2.himl 


委 集 沈 笠 器 控制 舌 色 
并 集 选 震 器 榨 制 字体 后 代 法 择 器 控制 大 小 


17.4 CSS 继承 特性 


CSS 的 一 个 主要 特征 就 是 继承 ， 依 赖 于 祖先 -后 代 的 关系 。 继 承 是 一 种 机 制 ， 允 许 样式 不 仅 可 
以 应 用 于 某 个 特定 的 元 素 ， 还 可 以 应 用 于 其 后 代 。 
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17.4.1 什么 是 继承 


为 什么 孩子 与 父母 长 得 比较 像 ， 就 是 因为 孩子 继承 了 父母 的 基因 。CSS 样式 同样 具有 继承 特 
性 ， 相 互 嵌 套 的 HTML 元 素 形 成 了 父子 关系 ， 父 元 素 具有 的 CSS 样式 ， 子 元 素 也 具有 同样 的 CSS 
样式 。 例 如 我 们 给 <body> 元 素 设置 背景 色 为 灰色 ， 那 么 整个 页 面 中 所 有 元 素 的 背景 色 都 将 是 灰色 。 

当然 ， 孩 子 虽然 可 以 与 父母 长 得 很 像 ， 但 它们 始终 不 是 一 个 模子 里 刻 出 来 的 ， 孩 子 依然 有 他 
自己 的 特点 。 同 样 的 ， 虽 然 CSS 样式 具有 继承 特性 ， 但 是 子 元 素 还 可 以 设置 其 自己 的 样式 。 例 如 
<body> 元 素 设置 背景 色 为 灰色 ， 子 元 素 <p> 还 可 以 设置 背景 色 为 蓝 色 ， 这 样子 元 素 就 有 了 自己 的 
CSS 样式 。 


17.4.2 CSS 属性 继承 
虽然 CSS 具有 继承 特性 ， 但 并 不 是 所 有 的 CSS 属性 都 可 以 继承 。 文 本 相关 属性 是 继承 的 ， 如 


font-family 、font-size、font-style、font-variant、font-weight、font 、letter-spacing、line-height text-align、 
text-indent 、text-transform 和 word-spacing; 列表 相关 属性 是 继承 的 ， 如 list-style-image 、 
list-style-position、list-style-type 和 list-style; 颜色 相关 属性 是 继承 的 , 如 color。 需 要 说 明 的 是 ,fontsize 
属性 与 其 他 属性 有 点 不 同 ，font-size 继承 的 是 计算 的 值 。 


17.4.3 实例: 正确 使 用 CSS 继承 特性 


本 小 节 将 举例 说 明 CSS 继承 特性 的 使 用 方法 。 要 求 如 下 : 页 面 背景 色 为 灰色 ， 默 认 字 体 大 小 
为 24px， 段 落 第 一 个 字 字 体 大 小 为 30px 且 字 体 加 粗 ， 显 示 为 斜体 。 完 整 的 示例 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>17.4.1</title> 

<style> 

body{ 
background:#C6C6C6; 
font-size:24px; 

} 

pt 
text-indent:2em; 

} 

strong{ 
font-size:30px; 
font-weight:bold; 
font-style:italic; 

} 

-display right{ 
text-align:right; 

} 
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</style> 

</head> 

<body> 

<p><strong> 孔 </strong> 孔 丘 先 生 是 深 通 世故 的 老 先生 ， 大 约 除 脸 子 付 印 问题 以 外 ， 还 有 深 心 ， 
犯 不 上 来 做 明目张胆 的 破坏 者 ， 所 以 只 是 不 谈 ， 而 决 不 器， 于 是 乎 严 然 成 为 中 国 的 圣人 ， 道 大 ,无 所 不 包 故 
也 。 否 则 ， 现 在 供 在 圣 庙 里 的 ， 也 许 不 姓 孔 。</p> 

<p class="display right"> 一 鲁迅 </p> 

</body> 

</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 
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17.5 ”CSS 的 层 笃 特 性 


CSS 的 另 一 个 特性 就 是 它 的 层 全 性 。 层 车 性 是 指 当 有 多 个 选择 器 都 作用 于 同一 元 素 时 ， 即 多 
个 选择 器 的 作用 范围 发 生 了 重合，CSS 将 按照 一 定 的 原则 进行 处 理 。 

如 果 多 个 选择 器 定义 的 规则 相互 之 间 并 不 冲突 ， 那 么 元 素 将 应 用 所 有 选择 器 定义 的 样式 。 例 
如 下 面 这 段 代 码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>17.5.1</title> 

<style> 

p{ 
color:red; 

} 

#select id{ 
color:green; 

} 

:Select classf 
color:blue; 
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下 

</style> 

</head> 

<body> 

<p> 标 记 选 择 器 </p> 

<p class="select_class"> 标 记 选 择 器 和 类 选择 器 </p> 

<p id="select id" class="select_class"> 标 记 选 择 器 、 类 选择 器 和 ID 选择 器 </p> 
</body> 

</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 


© BD localhost/15/15.5.1.html 


标记 选择 器 
标记 选择 器 和 类 选择 器 
标记 选择 器 、 类 选择 器 和 ID 选 择 器 


如 果 多 个 选择 器 定义 的 规则 发 生 了 冲突 ， 那 么 CSS 将 按照 选择 器 的 优先 级 让 元 素 应 用 优先 级 
高 的 选择 器 定义 的 样式 。 有 关 选 择 器 优先 级 的 详细 内 容 将 在 后 面 章 节 进行 介绍 。 


17.6 CSS 样式 


以 上 介绍 了 CSS 的 一 些 基本 信息 ， 本 节 主 要 介绍 CSS 样式 的 分 类 。CSS 样式 按 其 所 在 位 置 可 
以 分 为 三 类 : 行内 样式 、 内 部 样式 和 外 部 样式 。 


17.6.1 行内 样式 


如 果 CSS 样式 在 HTML 元 素 标签 的 内 部 书写 ， 就 称 为 行内 样式 。 例 如 以 下 的 样式 : 
<hl style="color:red; font-size:24px;"> 行 内 样式 </h1l> 


行内 样式 需要 书写 在 元 素 标签 的 style 属性 中 ， 样 式 的 属性 和 值 之 间 用 冒号 分 隔 ， 多 个 样式 之 
间 用 分 号 分 隔 ， 行 内 样式 是 CSS 样式 的 一 种 基本 形式 。 

试想 一 下 ， 如 果 一 个 Web 页 面 中 有 100 个 元 素 ， 我 们 需要 给 每 个 元 素 都 编写 行内 样式 ， 其 中 
还 包含 很 多 重复 的 元 素 ， 这 将 是 一 件 非常 麻烦 的 事情 。 另 外 ， 因 为 将 HIML 元 素 与 CSS 样式 混杂 
在 一 起 ， 也 不 利于 程序 的 调试 和 修改 ， 所 以 行内 样式 仅 作为 CSS 样式 的 一 种 基本 形式 ， 并 不 提倡 
在 实际 的 项 目 中 使 用 。 
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17.6.2 ”内 部 样式 


内 部 样式 是 将 CSS 样式 编写 在 页 面 内 部 ， 但 所 有 的 样式 都 编写 在 <style> 元 素 中 ， 这 样 就 可 以 


将 CSS 样式 与 HTML 元素 分 离 ， 使 页 面 显得 更 加 整洁 。 例 如 下 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>17.6.1</title> 
<style> 

pt{ 


color:red; 
font-size:24px; 
} 
</style> 
</head> 
<body> 
<p> 内 部 样式 </p> 
</body> 
</html> 


而 这 段 代码 : 


内 部 样式 优 于 行内 样式 ， 可 以 实现 CSS 样式 与 HTML 元 素 分 离 ， 但 是 内 部 样式 只 对 当前 页 面 
有 效 。 如 果 多 个 页 面 中 有 很 多 相同 的 样式 ， 就 需要 做 很 多 重复 的 工作 ， 所 以 内 部 样式 也 不 是 理想 的 


方式 。 
17.6.3 外 部 样式 


外 部 样式 是 将 CSS 样式 编写 在 一 个 单独 的 文件 中 ， 该 文件 可 以 由 多 个 页 面 调用 ， 这 样 不 但 实 
现 了 CSS 样式 与 HTML 元 素 的 分 离 , 而 且 还 避免 了 很 多 重复 性 工作 , 对 于 CSS 样式 的 管理 也 非常 


有 帮助 。 例 如 下 面 这 段 代码 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>17.6.2</title> 


<link rel="stylesheet" href="style.css" type="text/css"/> 


</head> 
<body> 

<p> 外 部 样式 </p> 
</body> 
</html> 
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在 这 段 代码 中 ， 使 用 <link> 元 素 引 入 外 部 样式 ，rel 属性 用 于 设置 连接 的 关系 ， 这 里 设置 为 样 
式 表 ，href 属性 用 于 设置 外 部 样式 的 文件 路 径 ，type 属性 用 于 设置 链接 文件 的 MIME 类 型 。 


17.6.4 实例 : CSS 样式 的 实现 方式 


本 小 节 将 通过 具体 实例 详细 介绍 CSS 样式 的 各 种 实现 方式 。 在 本 例 中 ， 使 用 行内 样式 设置 需 
要 特殊 处 理 字体 的 样式 , 使 用 内 部 样式 设置 段落 中 字体 的 样式 , 使 用 外 部 样式 设置 全 局 字体 的 颜色 。 
完整 的 示例 代码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>17.6.3</title> 
<link rel="stylesheet" href="style.css" type="text/css"/> 
<style> 
em{ 
color:red; 
font-weight:bold; 
font-size:30px; 
} 
</style> 
</head> 
<body> 
<p><strong style="color:red; font-size:30px; font-weight:bold"> 父 </strong> 
亲 是 一 本 很 厚 的 书 , 小 时 候 我 就 很 佩服 <em> 我 的 父亲 </em>, 但 不 懂 其 中 的 含义 ; 随 岁月 的 推移 和 一 些 事情 
的 发 生 . 我 渐渐 地 了 解 了 <em> 我 的 父亲 </em>, 他 像 水 一 样 , 遇 到 障碍 则 气势 更 大 , 是 一 种 遇 到 挫折 则 更 加 
坚强 的 人 。</p> 
</body> 
</html> 


外 部 样式 style.css 文件 中 的 代码 如 下 : 
pt 

font-size:24px; 

text-indent :2em; 


} 


在 这 段 代码 中 ,创建 了 一 个 名 为 style.css 的 外 部 样式 文件 ， 并 在 页 面 中 通过 <link> 元 素 引 入 该 
文件 ， 该 文件 中 设置 了 一 个 标记 选择 器 ， 用 于 设置 全 局 字体 的 样式 。<strong> 元 素 用 于 设置 段落 第 
一 个 字 的 样式 ， 我 们 使 用 了 行内 样式 进行 设置 。<em> 元 素 用 于 设置 段落 中 需要 强调 的 文字 ， 我 们 
在 内 部 样式 中 对 其 进行 了 设置 。 运 行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 
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父亲 是 一 本 很 厚 的 书 ， 保 腿 妮 雇 从 匡 ;但 不 懂 其 中 的 含义 ; 
随 岁月 的 推移 和 一 些 事 地 了 解 了 老父 六 他 像 水 一 样 , 遇 
到 障碍 则 气势 更 大 , 是 一 种 遇 到 挫折 则 更 加 坚强 的 人 。 


17.7 CSS 优先 级 


在 HTML 中 ， 对 于 同一 个 元 素 可 以 设置 多 种 样式 ， 如 果 各 种 样式 中 都 设置 了 相同 的 属性 ， 但 
属性 值 不 同 ， 此 时 浏览 器 将 会 按照 什么 顺序 进行 解析 呢 ? 这 就 涉及 CSS 样式 优先 级 的 问题 。 本 节 
将 详解 介绍 浏览 器 解析 CSS 样式 的 先后 顺序 。 


17.7.1 id 优先 级 高 于 class 


了 D 选择 器 和 类 别 选择 器 是 使 用 比较 普遍 的 两 种 选择 器 , 当 HIML 中 同一 元 素 同时 设置 了 这 两 
种 选择 器 样式 时 ，ID 选择 器 的 优先 级 会 高 于 类 别 选择 器 的 优先 级 。 例 如 ， 在 HTML 页 面 中 有 一 个 
<p> 元 素 同 时 设置 了 这 两 种 选择 器 ， 类 别 选 择 器 中 设置 字体 颜色 为 红色 ， 而 人 D 选取 中 设置 了 字体 
的 颜色 为 蓝 色 ， 那 么 通过 浏览 器 解析 后 ，<p> 元 素 中 的 字体 最 终 将 显示 为 蓝 色 。 详 细 代 码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>17.7.1</title> 

<style> 

#red_ style{ 

color:blue; 


站 
.blue style{ 
color:red; 
上 
</style> 
</head> 
<body> 
<p id="red style"” class="blue style">ID 选择 器 显示 红色 ， 类 别 选 择 器 显示 为 蓝 色 </p> 
</body> 
</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 
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[BD localhost/15/157 1.html 


了 D 选 择 器 昌 示 红 冯 ， 类 别 小 择 器 品 示 为 赣 色 


17.7.2 后面 的 样式 覆盖 前 面 的 样式 


对 于 相同 样式 的 选择 器 ， 如 果 多 个 选择 器 中 同时 设置 了 相同 的 属性 ， 但 是 属性 值 不 同 ， 那 么 
越 靠 后 的 选择 器 的 优先 级 越 高 。 例 如 ， 在 HTML 页 面 中 ，<p> 元 素 设置 了 两 个 类 别 选择 器 ,第 一 个 
类 别 选择 器 设置 字体 为 红色 ， 第 二 个 类 别 选择 器 设置 字体 为 蓝 色 ， 经 浏览 器 解析 后 ， 最 终 <p> 元 素 
中 的 字体 将 显示 为 蓝 色 。 详 细 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>17.7.2</title> 
<style> 
.classA{ 
color:red; 
} 
.classB{ 
color:blue; 
} 
</style> 
</head> 
<body> 
<p class="classA classB"> 后 面 的 样式 覆盖 前 面 的 样式 </P> 
</body> 
</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 


[EE 
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后 面 的 样式 奢 状 前 面 的 样式 


(CY 这 里 的 先后 顺序 并 不 是 指 元 素 中 属性 值 的 先后 顺序 ， 而 是 <style> 元 素 中 选择 器 的 先后 
顺序 。 例 如 我 们 重新 设置 属性 值 为 class="classB classA"， 然 后 运行 代码 ， 效 果 依然 不 
变 ， 而 当 我 们 调换 <style> 元 素 中 classA 和 classB 的 先后 顺序 后 ， 再 运行 代码 ， 效 果 就 
会 发 生变 化 。 
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17.7.3 使用! important 


CSS 样式 中 有 一 个 特殊 的 属性 !important， 任 何 使 用 该 属性 的 CSS 样式 的 优先 级 都 将 被 提升 为 
最 高 。 例 如 上 例 中 的 样式 ， 如 果 给 classA 的 属性 添加 该 属性 ， 虽 然 classB 在 classA 后 面 声明 ， 但 
是 浏览 器 解析 时 依然 会 提升 classA 属性 的 优先 级 。 详 细 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>17.7.3</title> 

<style> 

.classA{ 

color:red !important; 


} 
.classB{ 
color:blue; 
} 
</style> 
</head> 
<body> 
<p class="classA classB"> 优 先 提升 具有 !important 属性 的 样式 </p> 
</body> 
</html> 


17.7.4 ”指定 的 高 于 继承 


CSS 样式 具有 继承 性 ， 但 并 非 所 有 的 子 元 素 都 必须 继承 父 元 素 的 属性 ， 此 时 可 以 使 用 行内 样 
式 或 选择 器 为 某 些 元 素 指定 新 的 样式 ,指定 样式 的 优先 级 将 高 于 继承 样式 的 优先 级 。 例 如 ,我们 为 
<body> 元 素 设置 字体 大 小 为 24px， 而 <em> 元 素 中 的 字体 需要 特殊 显示 ， 此 时 可 以 使 用 ID 选择 器 
设置 <em> 元 素 的 字体 大 小 为 30px， 颜 色 为 红色 ， 这 样 人 D 选择 器 样式 的 优先 级 高 于 <em> 元 素 继承 
<body> 元 素 样式 的 优先 级 ，<em> 元 素 中 的 字体 就 会 显示 为 大 号 字体 。 详 细 代码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>17.7.4</title> 
<style> 
body{ 
font-size:24px; 
上 
em{ 
color:red; 


font-size:30px; 
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} 

</style> 

</head> 

<body> 

<em> 指 定 </em> 样 式 的 优先 级 <em> 高 于 继承 </em> 样 式 的 优先 级 
</body> 

</html> 


运行 这 段 代 码 后， 效果 如 下 图 所 示 。 


回 csseesa x 
€ 3 © [Blocalhosy15/1571.html 


背 例 翌 式 的 优先 级 高 无 铭 贡 样式 的 优先 级 


17.7.5 “行内 样式 高 于 内 部 或 外 部 样式 


CSS 样式 可 以 分 为 行内 样式 、 内 部 样式 和 外 部 样式 ， 在 这 三 种 样式 中 ， 行 内 样式 的 优先 级 最 


i， 而 内 部 样式 与 外 部 样式 的 优先 级 取决 于 它们 的 先后 顺序 。 例 如 下 面 这 段 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>17.7.5</title> 
<link rel="stylesheet" href="style.css" /> 
<style> 
p{ 
color:blue; 
} 
</style> 
</head> 
<body> 
<p style="color:red;"> 行 内 样式 显示 为 红色 ， 内 部 样式 显示 为 蓝 色 ， 外 部 样式 显示 为 绿色 </p> 
</body> 
</html> 


外 部 样式 style.ess 中 的 代码 如 下 : 


pt{ 
color:green; 
和 


在 这 段 代 码 中 ， 我 们 分 别 在 行内 样式 、 内 部 样式 和 外 部 样式 中 设置 了 <p> 元 素 的 样式 。 由 于 行 


内 样式 的 优先 级 高 于 其 他 两 种 样式 的 优先 级 , 所 以 运行 这 段 代码 后 , 浏览 器 中 字体 的 颜色 显示 为 红 
色 ， 效 果 如 下 图 所 示 。 
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回 css 到 


试 一 试 : 如 果 删 除 行内 样式 , 再 次 运行 代码 , 则 字体 显示 为 蓝 色 ; 如 果 调换 <link> 元 素 和 <style> 
元 素 的 位 置 ， 再 次 运行 代码 ， 则 字体 显示 为 绿色 。 


17.7.6 实例 : 灵活 运用 CSS 优先 级 


本 小 节 将 通过 一 个 具体 的 案例 详细 介绍 CSS 优先 级 的 使 用 方法 。 首 先 创建 一 个 外 部 样式 ， 代 
码 如 下 : 
body{ 


color:red; 


} 


HTML 页 面 中 只 有 一 个 <p> 元 素 ，<p> 元 素 中 有 一 段 文字 ， 使 用 <link> 元 素 引 入 外 部 样式 。 详 
细 代 码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>17.7.6</title> 

<link rel="stylesheet" href="17.7.6style.css" /> 

</head> 

<body> 

<p>CSS 样式 的 优先 级 </p> 

</body> 

</html> 


这 段 代码 非常 简单 , 由 于 <p> 元 素 内 翌 与 <body> 元 素 中 , 虽然 没有 为 <p> 元 素 设置 特定 的 样式 ， 
但 是 <p> 元 素 继承 了 <body> 元 素 的 样式 ， 所 以 运行 这 段 代 码 后 ， 页 面 中 的 字体 将 显示 为 红色 。 

下 面 我 们 一 步 步 地 进行 操作 ， 看 看 各 种 CSS 样式 对 这 段 文字 的 影响 效果 。 

(1) 在 外 部 样式 中 为 <p> 元 素 添加 标记 选择 器 ， 并 设置 字体 颜色 为 蓝 色 。 代 码 如 下 : 


Bf{ 
color:blue; 


} 


此 时 虽然 <p> 元 素 继承 了 <body> 元 素 的 样式 , 但 是 由 于 指定 样式 的 优先 级 高 于 继承 样式 , 所 以 
字体 最 终 将 显示 为 蓝 色 。 


第 17 章 CSS 基础 知识 | 253 


(2) 在 HTML 代码 中 为 <p> 元 素 设置 D 属性 ， 并 在 外 部 样式 中 创建 ID 选择 器 ， 在 ID 选择 
器 中 设置 字体 颜色 为 红色 。 代 码 如 下 : 
<p id="my id1l">CSS 样式 的 优先 级 </p> 
#my_id{ 
color:red; 


} 


此 时 <p> 元 素 同 时 具有 标记 选择 器 和 ID 选择 器 两 种 样式 , 而 ID 选择 器 的 优先 级 高 于 标记 选择 
器 的 优先 级 ， 所 以 字体 最 终 将 显示 为 红色 。 
(3) 在 HTML 代码 中 为 <p> 元 素 设置 class 属性 , 并 在 外 部 样式 中 为 <p> 元 素 设置 类 别 选择 器 ， 
在 类 别 选择 器 中 设置 字体 颜色 为 绿色 。 代 码 如 下 : 
<p id="my_id" class="my_classl">CSS 样式 的 优先 级 </p> 
-my_classl{ 


color:green; 


} 


此 时 <p> 元 素 同 时 具有 标记 选择 器 、ID 选择 器 和 类 别 选择 器 三 种 样式 ， 而 ZD 选择 器 的 优先 级 
高 于 标记 选择 器 和 类 别 选择 器 的 优先 级 ， 所 以 字体 最 终 将 显示 为 红色 。 

如 果 修改 HTML 中 的 代码 ， 删 除 <p> 元 素 的 ZD 属性 ， 此 时 字体 就 显示 为 绿色 。 所 以 ，ID 选择 
器 的 优先 级 高 于 类 别 选 择 器 的 优先 级 ， 而 类 别 选择 器 的 优先 级 高 于 标记 选择 器 的 优先 级 。 

(4) 在 外 部 样式 表 中 再 添加 一 个 类 别 选 择 器 my_class2, 并 设置 字体 颜色 为 红色 , 并 在 HIML 
代码 中 使 用 新 添加 的 选择 器 。 代 码 如 下 : 

<p class="my_classl my_class2">CSS 样式 的 优先 级 </p> 

-my_classl{ 

color:green; 
} 
.my_class2{ 


color:red; 


} 


此 时 <p> 元 素 同 时 具有 两 个 类 别 选 择 器 样式 ， 由 于 my_class2 在 my_classl 后 面 声明 ， 所 以 字 
体 最 终 将 显示 为 红色 。 
如 果 调 整 my_class2 和 my_classl 先后 顺序 ， 则 相关 代码 如 下 : 
.my_class2{ 
color:red; 
} 
-my_classl{ 
color:green; 
} 


此 时 my_classl 在 my_class2 后 面 声明 ， 字 体 最 终 将 显示 为 绿色 。 
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(5) 在 HTML 页 面 中 创建 一 个 内 部 样式 my_class3， 设 置 字体 颜色 为 蓝 色 ， 并 在 <p> 元 素 中 
使 用 该 样式 。 相 关 代码 如 下 : 
<link rel="stylesheet" href="17.7.2style.css" /> 
<style> 
-my_class3{ 
color:blue; 


” 
</style> 
<p class="my_classl my_class2 my_class3">CSS 样式 的 优先 级 </p> 


此 时 三 个 类 别 选 择 器 同时 作用 于 <p> 元 素 ， 前 两 个 在 外 部 样式 中 ， 第 三 个 在 内 部 样式 中 ， 又 因 
为 内 部 样式 <style> 在 外 部 样式 <link> 元 素 之 后 声明 ， 所 以 字体 最 终 显示 为 蓝 色 。 

如 果 调 整 <style> 和 <link> 元 素 的 位 置 ， 那 么 最 终 外 部 样式 将 起 作用 ， 字 体 最 终 显示 为 绿色 。 

(6) 在 <p> 元 素 中 添加 行内 样式 ， 设 置 字体 颜色 为 红色 。 相 关 代 码 如 下 : 

<p class="my_classl my_class2 my_class3" style="color:red;">CSS 样式 的 优先 级 
</p> 


虽然 <p> 元 素 此 时 已 经 有 了 内 部 样式 和 外 部 样式 , 但 是 因为 行内 样式 的 优先 级 高 于 内 部 样式 和 
外 部 样式 ， 所 以 最 终 文字 颜色 将 显示 为 红色 。 

(7) 在 内 部 样式 中 为 my_class3 类 别 选择 器 添加 !important。 相 关 代码 如 下 : 

<style> 

-my_class3{ 

color:blue !important; 

是 

</style> 

<link rel="stylesheet" href="]17.7.2style.css" /> 

此 时 虽然 外 部 样式 在 内 部 样式 后 面 声明 ， 但 是 由 于 内 部 样式 添加 了 !important， 所 以 内 部 样式 
的 优先 级 被 提高 了 ， 文 字 最 终 显 示 为 蓝 色 。 


17.8 CSS 盒子 模型 


CSS 在 描述 HTML 元 素 时 会 形成 一 个 矩形 框 , 我 们 可 以 将 这 个 矩形 框 形 象 地 看 成 是 一 个 盒子 。 
盒子 模型 规定 了 元 素 框 处 理 元 素 内 容 (element content) 、 内 边 距 (padding) 、 边 框 (border) 和 
外 边 距 (margin) 的 方式 。 在 HTML 中 ， 每 个 元 素 都 具有 盒子 模型 ，CSS 盒子 模型 是 CSS 中 一 个 
重要 的 组 成 部 分 。 


17.8.1 盒子 模型 结构 
我 们 先 来 看 一 下 盒子 模型 的 结构 ， 如 下 图 所 示 。 
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margin-left 
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margin-bottom 


在 这 个 模型 结构 中 ， 最 内 层 的 是 元 素 的 内 容 (content) ， 向 外 依次 是 内 边 距 (padding-top、 
padding-right、 padding-bottom、 padding-left)、 边 框 (border-top、border-right、border-bottom、 border-left) 
和 外 边 距 (marging-top、margin-right、margin-bottom、margin-left) 。 内 边 距 、 边 框 和 外 边 距 分 别 
都 有 上 、 下 、 左 、 右 4 个 属性 ， 这 4 个 属性 可 以 同时 应 用 于 一 个 元 素 ， 也 可 以 单独 或 部 分 应 用 于 同 
一 个 “元 素 。 


17.8.2 边框 border) 
边框 是 内 容 与 填充 的 边界 。 可 以 使 用 边框 属性 设置 边框 的 各 种 样式 ， 下 面 分 别 进行 介绍 。 
1. border-style 


border-style 是 边框 中 最 重要 的 属性 ， 用 于 设置 元 素 所 有 边框 的 样式 ， 或 者 单独 为 各 个 边框 设 
置 样式 。CSS 中 提供 了 多 种 边框 样式 可 供 选择 ， 具 体 如 下 表 所 示 。 


属性 值 描 述 

none 定义 无 边框 

hidden 与 “none” 相 同 。 不 过 应 用 于 表 时 除外 。 对 于 表 ，hidden 用 于 解决 边框 冲突 
dotted 定义 点 状 边框 。 在 大 多 数 浏览 器 中 呈现 为 直线 
dashed 定义 虚线 。 在 大 多 数 浏览 器 中 呈现 为 实 线 

solid 定义 实 线 

double 定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 
groove 定义 3D 叫 模 边框 。 其 效果 取决 于 border-color 的 值 
ridge | 定义 3D 玖 状 边框 。 其 效果 取决 于 border-color 的 什 
inset 定义 3D inset 边框 。 其 效果 取决 于 border-color 的 值 
outset 定义 3D outset 边框 。 其 效果 取决 于 border-color 的 值 
inherit 规定 应 该 从 父 元 素 继承 边框 样式 


下 图 显示 了 部 分 边框 样式 的 效果 。 
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边框 样式 为 solid 的 效果 


边框 样式 为 double 的 效果 


如 果 要 为 元 素 的 所 有 边框 设置 相同 的 样式 , 只 需要 给 border-style 属性 指定 一 个 边框 样式 即 可 。 
代码 如 下 : 


border-style:solid; 


如 果 要 为 元 素 的 4 个 边框 设置 不 同 的 样式 ， 则 需要 按照 上 、 右 、 下 、 左 的 顺序 依次 指定 边框 
样式 。 相 关 代码 如 下 : 


border-style:solid dashed double dotted; 


如 果 上 、 下 边框 样式 不 同 ， 左 、 右 边框 样式 相同 ， 则 可 以 使 用 以 下 代码 指定 边框 样式 。 
border-style:solid dashed double; 


在 这 种 情况 下 ， 上 边框 样式 设置 为 solid， 左 、 右 边框 样式 设置 为 dashed， 下 边框 样式 设置 为 
double。 

如 果 元 素 的 上 、 下 边框 相同 ， 左 、 右 边框 相同 ， 则 还 可 以 使 用 以 下 代码 指定 边框 样式 。 

border-style:solid dashed; 


在 这 种 情况 下 ， 上 、 下 边框 样式 设置 为 solid， 左 、 右 边框 样式 设置 为 dashed。 
如 果 不 指定 边框 的 样式 ， 边 框 其 他 的 属性 就 都 将 被 忽略 。 例 如 下 面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>17.8.1</title> 

<style> 

body{ 
background:#295CA9; 

} 

div{ 
color:white; 
border-style:solid; 
border-width:10px; 

} 

</style> 
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</head> 

<body> 

<div> 必 须 设置 边框 样式 才能 看 见 边框 </div> 
</body> 

</html> 


我 们 先 给 <body> 元 素 设置 一 个 背景 色 ， 再 给 <div> 元 素 设置 一 个 前 景色 和 边框 样式 ， 并 指定 边 
框 宽度 为 10 个 像素 。 运 行 这 段 代 码 后， 就 能 看 见 一 个 白色 的 边框 效果 ， 如 下 图 所 示 。 


如 果 删 除 边 框 样式 ， 只 保留 边框 宽度 ， 再 次 执行 这 段 代 码 ， 由 于 没有 设置 边框 样式 ， 边 框 的 
宽度 属性 被 忽略 ， 所 以 就 看 不 到 边框 了 ， 效 果 如 下 图 所 示 。 


2. border-width 


border-width 用 于 设置 边框 的 厚度 ， 其 属性 值 可 以 是 长 度 计量 值 ， 也 可 以 是 CSS 规定 的 thin、 
medium 和 thick。thin 表示 细 的 边框 ，medium 表示 默认 的 中 等 边框 ，thick 表示 粗 的 边框 。 这 三 种 
边框 的 效果 如 下 图 所 示 。 


如 果 需 要 给 所 有 边框 设置 相同 的 宽度 , 则 只 需要 给 border-width 设置 一 个 宽度 即 可 ; 如 果 需 要 
分 别 给 边框 的 各 个 边 设置 宽度 ， 则 可 以 给 border-width 设置 多 个 值 。 


(7 只 有 设置 了 border-style 属性 ，border-width 属性 才 起 作用 。 
注意 
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3. border-color 


border-color 属性 用 于 设置 边框 的 颜色 ， 它 的 值 可 以 是 CSS 规定 的 颜色 名 称 〈 如 red) ， 也 可 
以 是 十 六 进 制 值 的 颜色 (如 纵 ff0000) ， 还 可 以 是 RGB 颜色 值 。 同 样 ，border-color 可 以 设置 4 条 
边框 颜色 相同 ， 也 可 以 根据 需要 设置 4 条 边框 颜色 不 同 。 

4. border 


如 果 以 上 分 别 设置 边框 样式 、 宽 度 和 颜色 的 方法 过 于 烦琐 ， 还 可 以 使 用 border 属性 一 次 性 设 
置 边 框 的 所 有 属性 。 例 如 以 下 代码 : 


border:red solid 5px; 


在 这 段 代码 中 ，border 的 第 一 个 值 表示 边框 的 颜色 , 第 二 个 值 表示 边框 的 样式 , 第 三 个 值 表示 
边框 的 宽度 。 需要 注意 的 是 , 这 种 设置 是 一 种 通用 设置 , 元 素 所 有 边框 的 颜色 、 样式 和 宽度 都 一 样 ， 
不 能 设置 个 别 边框 不 一 样 的 情况 。 


17.8.3 ”内 边 距 (padding) 


内 边 距 是 指 填 充 内 容 与 边框 之 间 的 部 分 。 内 边 距 的 属性 有 5 种 ， 分 别 为 padding、padding-top、 
padding-bottom、 padding-left 和 padding-right, 其 属性 值 可 以 是 距离 单位 , 如 像素 (px) 或 厘米 (cm)， 
也 可 以 是 百分比 (%) 。 通 过 设置 内 边 距 可 以 控制 内 容 与 边框 的 距离 ， 例 如 下 面 这 段 代 码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>17.8.2</title> 

<style> 

body{ 

background:#295CA9; 
} 
div{ 
background:red; 
font-size:24px; 
color:white; 
margin:10px; 
border-style:solid; 

} 

#top{ 

padding-top:20px; 

} 

</style> 

</head> 

<body> 

<div> 无 内 边 距 的 效果 </div> 

<div id="top"> 上 内 边 距 为 20 的 效果 </div> 
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</body> 
</html> 


运行 这 段 代 码 后 ， 可 以 看 到 第 一 个 <div> 元 素 没有 使 用 内 边 距 属性 ， 文 字 正常 显示 ， 而 第 二 个 
<div> 元 素 使 用 了 上 内 边 距 为 20 个 像素 的 效果 , 文字 与 边框 之 间 出 现 了 一 段 距离 , 效果 如 下 图 所 示 。 


使 用 padding 简写 ， 可 以 设置 不 同 的 内 边 距 。 如 果 设 置 一 个 属性 值 ， 则 指定 所 有 内 边 距 相等 ; 
如 果 设 置 两 个 属性 值 ， 则 指定 左 、 右 内 边 距 相 等 ， 上 、 下 内 边 距 相等 ， 如 果 设 置 三 个 属性 值 ， 则 第 
-个 值 指定 上 内 边 距 ， 第 二 个 值 指定 左右 内 边 距 ， 第 三 个 值 指定 下 内 边 距 ; 如 果 设 置 四 个 属性 值 ， 
则 分 别 指定 上 、 右 、 下 、 左 4 个 内 边 距 的 值 。 相 关 代码 如 下 : 

padding:20px; 

padding:20px 30px; 

padding:20px 30px 40px; 

padding:20px 30px 40px 50px; 


17.8.4 ”外 边 距 〈margin) 


外 边 距 用 于 设置 边框 以 外 ， 元 素 盒子 以 内 的 空间 ， 主 要 用 于 设置 相 邻 元 素 之 间 的 距离 。 外 边 
距 同样 具有 5 个 属性 ， 分 别 为 margin、margin-top、margin-bottom、margin- left 和 margin-right， 其 
使 用 方法 与 内 边 距 类 似 。 对 于 两 个 邻近 的 均 设置 有 边界 值 的 盒子 , 它们 邻近 部 分 的 边界 将 不 是 二 者 
边界 的 相 加 ， 而 是 二 者 的 重合, 若 二 者 邻近 的 边界 值 大 小 不 等 ， 则 取 二 者 中 较 大 的 值 。 例 如 下 面 这 
段 代码 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>17.8.3</title> 
<style> 
body{ 
background:#295CA9; 
} 
div{ 
background:red; 
font-size:24px; 
color:white; 
border-style:solid; 
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margin:10px; 
float:left; 
} 
#margin{ 
margin:20px; 
} 
</style> 
</head> 
<body> 
<div> 外 边 距 为 10 的 效果 </div> 
<div id="margin"> 外 边 距 为 20 的 效果 </div> 
</body> 
</html> 


在 这 段 代码 中 ， 我 们 设置 第 一 个 <div> 元 素 的 外 边 距 为 10 个 像素 ， 第 二 个 <div> 元 素 的 外 边 距 
为 20 个 像素 ， 但 是 从 下 面 的 效果 中 可 以 看 出 ， 两 个 <div> 元 素 之 间 的 部 分 只 有 20 个 像素 ， 而 并 非 
30 个 像素 。 


17.8.5 ”盒子 的 浮动 


在 CSS 中 有 一 个 float 属性 ， 用 于 控制 盒子 的 浮动 。 如 果 将 float 属性 的 值 设 置 为 left 或 right， 
元 素 就 会 向 其 父 元 素 的 左 侧 或 右 侧 靠近 ， 同 时 默认 情况 下 ,盒子 的 宽度 不 再 伸展 ， 而 是 根据 盒子 的 
内 容 宽度 来 确定 。 我 们 先 来 看 一 个 没有 浮动 的 例子 ， 代 码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>17.8.4</title> 
<style> 
body{ 
background:#295CA9; 
} 
div{ 
font-size:24px; 
color:white; 
border-style:solid; 
margin:15px; 


第 17 章 CSS 基础 知识 | 261 


} 
#parent{ 
background:#79DCF6; 
} 
#childl{ 
background: red; 
} 
#child2{ 
background:green; 
} 
#child3{ 
background:blue; 
} 
</style> 
</head> 
<body> 
<div id="parent"> 
<div id="child1"> 第 一 个 </div> 
<div id="child2"> 第 二 个 </div> 
<div id="child3"> 第 三 个 </div> 
</div> 
</body> 
</html> 


运行 这 段 代 码 后 ， 可 以 看 到 三 个 <div> 元 素 水 平方 向 自动 延伸 ， 而 垂直 方向 依次 排列 ， 效 果 如 
下 图 所 示 。 


此 时 ， 我 们 给 ZD 为 childl 的 元 素 添加 样式 ， 设 置 flot 属性 值 为 left， 可 以 看 到 第 一 个 元 素 在 
水 平方 向 不 再 延伸 ， 其 宽度 为 内 容 的 宽度 ， 而 第 二 个 元 素 则 靠近 第 一 个 元 素 ， 并 且 在 水 平方 向 仍然 
继续 延伸 ， 效 果 如 下 图 所 示 。 


[EE 
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此 时 ， 我 们 给 并 为 child2 的 元 素 添加 样式 ， 设 置 float 属性 值 为 left， 可 以 看 到 第 二 个 元 素 在 
水 平方 向 上 不 再 延伸 ， 而 且 宽度 也 变 成 内 容 的 宽度 ， 同 时 还 发 现 第 三 个 元 素 靠近 第 二 个 元 素 , 在 水 
平方 向 仍然 在 延伸 。 因 为 我 们 设置 了 外 边 距 , 所 以 还 可 以 看 到 第 一 个 元 素 和 第 二 个 元 素 之 间 的 部 分 
也 被 第 三 个 元 素 的 延伸 部 分 占据 了 ， 效 果 如 下 图 所 示 。 


最 后 我 们 给 ID 为 child3 的 元 素 添加 样式 ， 设 置 float 属性 值 为 left， 可 以 看 到 第 三 个 元 素 在 水 
平方 向 上 也 不 再 延伸 , 而 且 宽 度 与 内 容 宽度 相同 。 同 时 我 们 也 发 现在 这 三 个 元 素 的 上 方 出 现 了 一 个 
白色 的 长 条 ， 如 下 图 所 示 。 因 为 这 三 个 元 素 都 设置 了 float 属性 ， 而 谱 套 它们 的 <div> 元 素 并 没 设置 
高 度 ， 所 以 这 三 个 元 素 就 浮动 到 了 父 元 素 的 外 边 。 


试 一 试 : 盒子 的 浮动 情况 有 很 多 ， 要 想 真正 掌握 盒子 浮动 的 方法 ， 还 需要 进行 大 量 的 练习 和 
积累 。 比 如 本 例 中 ,如果 在 父 元 素 <div> 中 添加 一 段 文字 ， 并 分 别 设置 三 个 子 元 素 向 左 和 向 右 浮动 ， 
又 会 出 现 不 同 的 效果 ; 又 比如 在 <div> 浮 动 的 过 程 中 ， 分 别 设置 三 个 子 元 素 的 高 度 ， 也 会 出 现 不 同 
的 效果 ， 有 兴趣 的 读者 可 以 试 一 试 。 


17.8.6 ”盒子 的 定位 


CSS 中 可 以 使 用 position 属性 设置 盒子 的 定位 方式 ,其 中 包括 静态 (static)、 绝 对 定位 (absolute)、 
固定 (fixed) 和 相对 定位 (relative) ， 常 用 的 是 绝对 定位 和 相对 定位 。 

绝对 定位 以 元 素 的 父 级 对 象 为 参考 进行 定位 , 如 果 父 级 对 象 没有 设置 定位 属性 , 则 根据 HTML 
定位 规则 ,以 body 元 素 作为 参考 进行 定位 。 可 以 使 用 left、 right、top 和 buttom 设置 定位 的 偏 移 量 。 
使 用 绝对 定位 后 ， 绝 对 定位 后 的 盒子 从 标准 流 中 脱离 ， 而 其 他 盒子 的 定位 不 再 受 该 盒子 的 影响 。 例 
如 以 下 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
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<title>17.8.5</title> 
<style> 
body{ 
margin:0px; 
padding:0px; 
background:#295CA9; 
} 
div{ 
height:22px; 
font-size:20px; 
color:white; 
border-style:solid; 
} 
#boxl1{ 
background:#79DCF6; 
} 
#box2{ 
background:#BR5EE87 
} 
#box3{ 
background:#7243F6; 
} 
</style> 
</head> 
<body> 
<div id="boxl"> 第 一 个 盒子 </div> 
<div id="box2"> 第 二 个 盒子 </div> 
<div id="box3"> 第 三 个 盒子 </div> 
</body> 
</html> 


这 段 代 码 中 没有 设置 任何 定位 代码 ， 三 个 盒子 根据 标准 流 在 水 平方 向 延伸 ， 在 垂直 方向 依次 


排列 ， 效 果 如 下 图 所 示 。 


3 © [BD localhost/15/15.8.6html 尽 妆 三 


此 时 给 第 一 个 元 素 设置 position 属性 为 absolute， 并 设置 left 属性 为 130px，top 属性 为 30px。 


这 样 第 一 个 元 素 从 左 :| 


上 角 开 始 ， 分 别 向 下 移动 30 个 像素 ， 向 右 移动 150 个 像素 ， 水 平方 向 上 不 再 


延伸 ， 其 宽度 与 内 容 宽度 相同 ， 而 第 二 个 元 素 和 第 三 个 元 素 的 定位 不 再 受 第 一 个 元 素 的 影响 ， 根 据 


标准 流 排版 ， 依 次 向 」 


上 移动 。 相 关 代 码 如 下 : 
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#boxlif 
background:#79DCF6; 
position:absolute; 
left:150px; 
top:30px; 

} 


移动 后 的 效果 如 下 图 所 示 。 


相对 定位 的 元 素 依然 受 流 式 排版 影响 ， 只 是 根据 自身 的 位 置 进行 偏 移 。 例 如 我 们 再 给 第 二 个 
元 素 设置 position 属性 为 relative， 并 设置 left 属性 为 30px，top 属性 为 80px， 这样 第 二 个 元 素 相对 
于 其 自身 的 位 置 ,分别 向 右 移动 30 个 像素 ， 向 下 移动 80 个 像素 ， 并 依然 在 水 平方 向 上 延伸 , 而 且 
第 三 个 元 素 也 没有 占据 第 二 个 元 素 的 位 置 。 相 关 代码 如 下 : 

#box2{ 


background:#BASEE8; 
position:relative; 


left:30px; 
top:80px; 
移动 后 的 效果 如 下 图 所 示 。 


17.8.7 ”z-index 空间 位 置 


CSS 中 的 z-index 属性 决定 了 一 个 HTML 元 素 的 层 印 级 别 , 层 从 级 别 越 高 ,元 素 越 容易 被 展现 。 
这 就 好 比 一 本 书 ， 我 们 首先 看 到 的 是 书 的 封面 ,只 有 翻 开 了 封面 才能 看 见 书 中 的 其 他 内 容 ， 而 书 的 
封面 就 是 这 本 书 中 层 毒 级 别 最 高 的 一 页 。 
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但 事实 并 非 是 z-index 的 值 越 大 ， 元 素 就 越 容易 展现 。 我 们 先 来 看 一 段 代码 : 
<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>17.8.6</title> 


<style> 

body{ 
margin:0px; 
padding:0px; 

} 

div{ 
height:200px; 
width:200px; 


line-height:200px; 
font-size:20px; 
color:white; 
text-align:center; 


} 

#boxl{ 
background:#79DCF6; 

} 

#box2{ 
background:#BASEE8; 
margin-top:-80px; 
margin-left:100px; 

} 

#box3{ 
background:#7243F6; 
margin-top:-80px; 
margin-left:200px; 

} 

</style> 

</head> 

<body> 
<div id="boxl"> 第 一 个 盒子 </div> 
<div id="box2"> 第 二 个 盒子 </div> 
<div id="box3"> 第 三 个 盒子 </div> 

</body> 

</html> 


在 这 段 代码 中 有 三 个 <div> 元 素 ， 我 们 并 没有 设置 它们 的 z-index 属性 ， 而 是 根据 设置 负 边 距 
实现 了 堆 对 效果， 如 下 图 所 示 。 
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为 了 进行 验证 ， 分 别 设置 第 一 个 盒子 的 z-index 属性 为 100， 第 二 个 盒子 的 z-index 属性 为 50， 
第 三 个 盒子 的 z-index 属性 为 1。 我 们 期 望 将 这 三 个 盒子 的 堆 营 效果 进行 反 转 ， 但 是 运行 代码 后 ， 
并 没有 获得 期 望 的 效果 ， 三 个 盒子 依然 按照 之 前 的 堆 秋 效果 显示 。 这 是 因为 z-index 属性 只 能 工作 
于 那些 被 设置 了 position 属性 的 元 素 中 ， 如 果 元 素 没有 设置 position 属性 ， 则 按照 元 素 在 浏览 器 中 
出 现 的 先后 顺序 排列 。 

下 面 分 别 设置 三 个 盒子 的 position 属性 值 为 relative， 再 次 运行 代码 后 ， 我 们 得 到 了 预期 的 效 
果 ， 如 下 图 所 示 。 


试 一 试 :既然 z-index 只 能 在 设置 了 position 属性 时 起 作用 ,那么 当 多 个 元 素 同 时 设置 了 position 
属性 ， 但 是 z-index 属性 相同 时 ， 又 会 出 现 怎样 的 堆 大 效 果 呢 ? 有 兴趣 的 读者 可 以 试 一 试 。 


17.8.8 盒子 的 display 属性 


盒子 的 display 属性 用 于 建立 布局 时 定义 元 素 生成 的 显示 框 类 型 ， 常 用 的 值 有 inline、block 和 
none。inline 表示 此 元 素 会 被 显示 为 内 联 元 素 ， 元 素 前 后 没有 换行 符 ; block 表示 此 元 素 将 显示 为 块 
级 元 素 ， 此 元 素 前 后 会 带 有 换行 符 ，none 表示 此 元 素 不 会 被 显示 。 

比如 页 面 中 有 两 个 <div> 元 素 ， 我 们 知道 <div> 元 素 是 块 级 元 素 ， 每 一 个 元 素 都 会 占据 一 行 ， 如 
果 此 时 给 每 个 <div> 元 素 都 设置 display 属性 为 mline， 那 么 这 两 个 元 素 就 会 显示 在 一 行 。 再 比如 页 
面 中 有 两 个 <span> 元 素 ， 由 于 <span> 元 素 属 于 内 联 元 素 ， 所 以 两 个 <span> 元 素 会 显示 在 一 行 ， 如 果 
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给 每 个 <span> 元 素 都 设置 display 属性 为 block， 那 么 每 个 <span> 元 素 都 会 占据 一 行 。 对比 效果 如 下 
图 所 示 。 
没有 设置 display 属性 之 前 的 效果 。 


17.8.9 实例 : 用 盒子 模型 创建 网 页 布局 
本 例 我 们 将 使 用 盒子 模型 创建 一 个 页 面 布局 ， 先 来 看 一 下 布局 的 效果 ， 如 下 图 所 示 。 


在 这 个 页 面 布 局 中 总 共 分 为 6 部 分 : Header 部 分 是 页 面 的 头 部 ， 用 于 显示 网 站 的 logo 和 网 站 的 
名 称 ; Menu 是 菜单 导航 条 ; Sidebarl 和 Sidebar2 分 别 是 两 个 侧 边栏 , 用 于 显示 一 些 广告 或 推荐 信息 ， 
Content 是 页 面 的 主要 内 容 ，Footer 是 网 站 底 栏 ， 包 含 一 些 友情 链接 和 版 权 信息 等 。 

我 们 先 来 看 HTML 部 分 ， 这 里 需要 6 个 <div> 元 素 分 别 显示 这 6 个 区 域 ， 同 时 需要 一 个 <div> 
元 素 ， 用 于 包含 除 Footer 以 外 的 其 他 元 素 ， 而 对 于 页 面 的 主要 内 容 和 两 个 侧 边 栏 ， 还 需要 将 其 嵌 
入 一 个 <div> 元 素 中 。HTML 部 分 的 代码 如 下 : 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>17.8.7</title> 
</head> 
<body> 
<div id="container"> 
<div id="header">Header</div> 
<div id="menu">Menu</div> 
<div id="mainContent"> 
<div id="sidebarl">Sidebarl</div> 
<div id="sidebar2">Sidebar2</div> 
<div id="content">Content</div> 
</div> 
<div id="footer">Footer</div> 
</div> 
</body> 
</html> 


然后 创建 一 个 外 部 样式 文件 ， 命 名 为 layout.css， 并 在 HTML 页 面 中 使 用 <link> 引 入 该 文件 。 


<link rel="stylesheet" href="layout.css"/> 


接 下 来 ， 我 们 就 可 以 在 样式 文件 中 通过 设置 CSS 样式 来 控制 这 些 元 素 的 布局 了 。 首 先 创建 
<body> 元 素 的 标记 选择 器 ， 设 置 字体 、 颜 色 和 大 小 。 由 于 浏览 器 对 内 、 外 边 距 有 默认 的 值 ， 所 以 
我 们 需要 使 用 margin 和 padding 属性 消除 这 些 默认 值 。 相 关 代码 如 下 : 

body { 

font-family:Arial; 
font-size: 24px; 
margin: 0; 
padding:0; 

} 


为 了 让 内 婴 的 元 素 居中 ， 需 要 设置 类 选择 器 container 的 margin 为 auto。 由 于 Content 的 大 小 
需要 根据 内 容 自动 变化 ， 所 以 设置 其 宽度 为 100%。 相 关 代码 如 下 : 
#container { 
margin:auto; 
width: 100%; 


设置 Header 的 样式 ， 如 设置 其 高 度 为 150 个 像素 ,下 边 的 外 边 距 为 5 个 像素 , 并 设置 背景 色 。 
相关 代码 如 下 : 


#header { 
height: 150px; 
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background:#7DC85F; 
margin-bottom: Spx; 
} 
设置 Menu 的 样式 ， 如 设置 其 高 度 为 30 个 像素 ， 下 边 的 外 边 距 为 5 个 像素 ， 并 设置 背景 色 。 
相关 代码 如 下 : 
#menu { 
height: 30px; 
background:#7DC85F; 
margin-bottom: Spx; 
} 
设置 侧 边 和 主体 的 样式 ， 如 设置 其 高 度 为 400 个 像素 ， 下 边 的 外 边 距 为 5 个 像素 。 相 关 代 码 
如 下 : 
#mainContent { 
height: 400px; 
margin-bottom: S5px; 
} 
设置 侧 边栏 的 样式 , 如 设置 两 个 侧 边栏 的 宽度 均 为 200 个 像素 ,高 度 为 100%, 并 设置 背景 色 ， 
左边 的 侧 边栏 向 左 浮动 ， 右 边 的 侧 边栏 向 右 浮动 。 相 关 代码 如 下 : 
#sidebarl { 
float: left; 
width: 200px; 
height: 100%; 
background: #7DC85F; 
} 
#sidebar2 { 
float: right; 
width: 200px; 
height: 100%; 
background:#7DC85F; 
} 
设置 Content 的 样式 ， 如 设置 Content 的 高 度 为 100%， 与 左 、 右 侧 边栏 的 间距 均 为 5 个 像素 ， 
宽度 为 200 个 像素 ， 左 右 margin 为 205 个 像素 ， 并 设置 背景 色 。 相 关 代 码 如 下 : 
#content { 
margin: 0 205px; 
height: 100%; 
background:#7DC85F; 
二 


设置 Footer 的 样式 ， 其 样式 比较 简单 ， 如 高 度 为 60 个 像素 ， 并 设置 背景 色 。 相 关 代码 如 下 : 
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#footer { 
height: 60px; 
background:#7DC85F; 
. 


至 此 ， 我 们 就 通过 盒子 模型 创建 了 一 个 页 面 布 局 ， 运 行 这 段 代 码 后 可 以 看 到 开始 的 效果 了 。 
测试 题 

(1) 基本 的 CSS 选择 器 有 哪些 ? 

(2) 复合 选择 器 分 为 哪 几 种 ? 

(3) CSS 遵循 怎样 的 优先 级 ? 

(4) 盒子 模型 结构 包括 哪些 内 容 ? 

(5) z-index 属性 必须 在 设置 了 哪个 属性 后 才能 起 作用 ? 


17.9 本 章 小 结 


本 章 主 要 介绍 了 CSS 的 基础 知识 , 包括 基本 的 CSS 选择 器 、 复合 选择 器 、CSS 继承 特性 、CSS 
的 层 释 特 性 、CSS 样式 分 类 、CSS 优先 级 及 CSS 盒子 模型 ， 通 过 本 章 的 学 习 ， 读 者 应 该 熟练 掌握 
这 些 基 础 知识 ， 为 以 后 的 学 习 打 下 坚实 的 基础 。 


CSS3 选择 器 


上 一 章 我 们 介绍 了 CSS 的 基础 知识 ， 其 中 包括 很 多 选择 器 ， 在 CSS3 中 ， 又 新 增 了 很 多 选择 
器 ， 这 些 选 择 器 可 以 分 为 属性 选择 器 、 结 构 性 伪 类 、UI 元 素 状态 伪 类 、 否 定 伪 类 、 目 标 伪 类 和 通 
用 兄弟 元 素 选 择 器 ， 本 章 将 详细 介绍 这 些 新 增 选择 器 的 使 用 方法 。 


18.1 属性 选择 器 


CSS3 的 属性 选择 器 在 CSS 2 的 基础 上 进行 了 扩展 ， 新 增 了 4 种 属性 选择 器 ， 使 属性 选择 器 有 
了 通配符 的 概念 ， 本 节 将 详细 介绍 这 4 种 新 增 属性 选择 器 的 使 用 方法 。 


18.1.1 Efatt= “val” ] 


第 一 种 新 增 的 属性 选择 器 用 于 匹配 具有 相同 元 素 名 、 相 同属 性 名 和 相同 属性 值 的 元 素 。 其 中 
表示 HTML 元 素 ，att 表示 元 素 的 属性 名 称 ，val 表示 属性 值 。 例 如 下 面 这 段 代码 : 


a[href="abcd.html" 
color:red; 
上 


{ 


<a href="abcd.html"> 属 性 选择 器 </a> 


这 个 <a> 元 素 具 有 href 
针对 该 元 素 的 属性 选择 器 ， 


属性 ， 属 性 值 为 “abcd.html”， 该 值 是 一 个 字符 串 ， 我 们 可 以 创建 一 个 
而 属性 选择 器 的 名 称 就 可 以 定义 为 “a[hre 全 "abcdhtml"]”， 这 样 新 创 


建 的 属性 选择 器 也 会 应 用 到 该 元 素 上 。 
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18.1.2 E[attA=“val”] 


第 二 种 新 增 的 属性 选择 器 在 第 一 种 属性 选择 器 的 基础 上 进行 了 扩展 ， 新 增 了 一 个 通配符 ^。 这 
个 通配符 表示 ， 如 果 卫 元 素 中 的 att 属性 值 以 val 开始 ， 那 么 这 个 属性 选择 器 即 可 应 用 到 该 元 素 。 
例如 下 面 这 段 代码 : 
a[href^="abc"]{ 
color:red; 
} 
<a href="abcd.html"> 属 性 选择 器 </a> 


<a> 元 素 的 href 属性 值 为 “abcd.html”， 该 值 是 一 个 字符 串 ， 以 “abce” 开 始 ， 我 们 可 以 创建 
一 个 针对 该 元 素 的 属性 选择 器 ， 而 属性 选择 器 的 名 称 就 可 以 定义 为 “a[href^="abc"]”， 这 样 新 创建 
的 属性 选择 器 也 会 应 用 到 该 元 素 上 。 


18.1.3 E[att$= “val” ] 


第 三 种 新 增 的 属性 选择 器 与 第 二 种 新 增 的 属性 选择 器 类 似 ， 但 不 同 的 是 这 类 选择 器 的 匹配 符 
为 符号， 表示 以 某 个 字符 串 结束 。 例 如 下 面 这 段 代 码 : 
a[href$="html"] { 
color:red; 
} 
<a href="abcd.html"> 属 性 选择 器 </a> 


同样 是 这 个 <a> 元 素 ， 不 同 的 是 现在 使 用 $ 符 号 为 匹配 符 ， 匹 配 的 字符 串 是 属性 值 Cabcd.html) 
的 结束 部 分 (html) ， 这 样 就 创建 了 一 个 <a> 元 素 的 href 属性 以 “html” 结 束 的 属性 选择 器 。 


18.1.4 E[att*= “val” ] 


第 四 种 新 增 的 属性 选择 器 比 前 几 种 属性 选择 器 应 用 更 为 广泛 ， 它 使 用 了 “*” 匹 配 符 ， 表 示 只 
要 属性 值 中 包括 该 字符 串 ， 即 可 应 用 该 样式 。 例 如 下 面 这 段 代 码 : 


a[href*="d.h"]{ 
color:red; 
} 
<a href="abcd.html"> 属 性 选择 器 </a> 


因为 <a> 元 素 的 href 属性 值 中 包含 指定 的 字符 串 “dh”， 所 以 该 属性 选择 器 就 可 以 应 用 给 这 
个 <a> 元 素 。 


18.1.5 ”实例 : 文本 效果 
下 面 通过 一 个 文本 效果 实例 ， 深 刻 理解 这 4 种 新 增 属性 选择 器 的 用 法 。 完 整 的 示例 代码 如 下 : 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>18.1.1</title> 
<style> 
a[href="http://www.xxxxl].com/1"] { 
color:red; 
} 
a[href^="https"]{ 
color:violet; 
} 
a[href$="/3"]{ 
color:green; 
} 
a[href*="xxxx4"]{ 
color:orange; 
} 
</style> 
</head> 
<body> 
<a href="http://www.xxxxl .com/1"> 属 性 值 完全 匹配 </a> 
<a href="https://www.xxxx2.com/2"> 属 性 值 开始 匹配 </a> 
<a href="http://www.xxxx3.com/3"> 属 性 值 结束 匹配 </a> 
<a href="http://www.xxxx4.com/4"> 属 性 值 包含 匹配 </a> 
</body> 
</html> 


在 这 段 代码 中 有 4 个 <a> 元 素 ， 它们 都 有 href 属性 , 但 属性 值 不 同 ， 我们 创建 了 个 与 之 对 应 的 
属性 选择 器 ， 分 别 用 于 控制 每 个 元 素 内 文字 的 颜色 ， 效 果 如 下 图 所 示 。 


18.2 ”结构 性 伪 类 选择 器 


CSS3 中 新 增 了 结构 性 伪 类 选择 器 , 这 与 CSS 原 有 的 类 选择 器 有 很 大 的 不 同 , 本 节 主要 介绍 这 
些 结构 性 伪 类 选择 器 的 使 用 方法 。 
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18.2.1 伪 类 选择 器 


什么 是 伪 类 选择 器 呢 ? 在 CSS 2 中 ,我 们 可 以 通过 自 定义 元 素 的 class 属性 名 称 创建 类 选择 器 ， 
这 样 元 素 就 可 以 使 用 类 选择 器 的 样式 ,而 在 CSS3 中 ,还 有 一 种 伪 类 选择 器 ， 这 种 选择 器 的 名 称 由 
CSS 定义 ， 用 户 不 能 自 定义 。 在 CSS3 中 常用 的 伪 类 选择 器 是 <a> 元 素 上 的 几 种 选择 器 ， 它 们 的 使 
用 方法 如 下 : 
a:link{ 
Color:#A3A3A3; 
text-decoration:none; 
} 
a:visited{ 
Color:#EC4648; 
text-decoration:none; 
} 
a:hover{ 
Color:#2AB631; 
text-decoration:underline; 
} 
a:activef{ 
Color:#D60BEA; 
text-decoration:underline; 


} 


18.2.2 ” 伪 元 素 选择 器 

在 CSS 2 中 可 以 通过 元 素 的 名 称 创建 标记 选择 器 , 而 在 CSS3 中 , 还 存在 另外 一 类 伪 元 素 选择 
器 ， 这 类 选择 器 并 不 是 针对 元 素 使 用 的 选择 器 ， 而 是 针对 CSS 中 已 经 定义 的 伪 元 素 使 用 的 选择 器 。 
它 的 使 用 规则 如 下 : 

元 素 名 : 伪 元 素 { 属 性 : 值 } 

伪 元 素 选择 器 还 可 以 与 类 选择 器 混合 使 用 。 使 用 规则 如 下 : 

元 素 名 .类 名 : 伪 元 素 {属性 : 值 } 

这 类 伪 元 素 选择 器 主要 有 4 个， 下 面 分 别 进行 介绍 。 

1. first-line 伪 元 素 选择 器 

这 类 选择 器 定义 的 样式 将 应 用 于 元 素 中 的 第 一 行文 字 。 例 如 下 面 这 段 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<titie>19.2.1</title> 
<style> 
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p:first-line{ 
color:red; 
</style> 
</head> 
<body> 
<p> 第 一 行内 容 <br> 第 二 行内 容 </P> 
</body> 
</html> 


在 这 段 代码 中 有 一 个 <p> 元 素 ， 元 素 中 的 内 容 被 <br> 分 成 了 两 行 ， 使 用 first-line 伪 元 素 选择 器 
设置 第 一 行文 字 的 颜色 为 红色 。 运 行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 


2. first-letter 伪 元 素 选 择 器 


这 类 选择 器 定义 的 样式 将 应 用 于 元 素 中 内 容 的 第 一 个 字母 或 文字 。 例 如 下 面 这 段 代 码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>18.2.2</title> 

<style> 

p:first-lettert{ 
color:red; 
font-size:30px; 

} 

</style> 

</head> 

<body> 

<p> 伪 类 选择 器 </p> 

</body> 

</html> 


这 段 代码 中 有 一 个 <p> 元 素 ， 元 素 中 有 一 段 文字 ， 使 用 first-letter 伪 元 素 选择 器 设置 这 段 文字 
第 一 个 文字 的 颜色 为 红色 ， 字 号 为 30px， 效 果 如 下 图 所 示 。 
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3. before 伪 元 素 选 择 器 
这 类 选择 器 用 于 在 指定 元 素 之 前 插入 一 些 内 容 。 使 用 规则 如 下 : 
元 素 名 : before{fcontent: 文字 信息 } 


例如 下 面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>18.2.3</title> 

<style> 

p:beforef{ 
content:"" 

} 

</style> 

</head> 

<body> 

<p> 伪 元 素 选择 器 </p> 

<p> 伪 元 素 选择 器 </p> 

<p> 伪 元 素 选 择 器 </p> 

</body> 

</html> 


在 这 段 代码 中 有 三 个 <p> 元 素 ,每 个 元 素 中 都 有 一 段 文字 ,使 用 before 伪 元 素 选择 器 在 这 些 文 
字 前 面 插入 一 个 “ 浆 ”， 效 果 如 下 图 所 示 。 


和 © D localhost/16/162.1.html 


妆 伪 元 素 选 择 器 
妆 伪 元 素 选 择 器 
妆 伪 元 素 选择 器 


4. after 伪 元 素 选择 器 
这 类 选择 器 用 于 在 元 素 之 后 插入 一 些 内 容 。 使 用 规则 如 下 : 
元 素 名 : after{content: 文字 信息 } 


例如 下 面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
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<title>18.2.4</title> 

<style> 

p:after{ 
content:" 太 " 

} 

</style> 

</head> 

<body> 

<p> 伪 类 选择 器 </p> 

<p> 伪 类 选择 器 </p> 

<p> 伪 类 选择 器 </P> 

</body> 

</html> 


在 这 段 代码 中 有 三 个 <p> 元 素 ， 每 个 元 素 中 都 有 一 段 文 字 ， 使 用 after 伪 元 素 选择 器 在 这 些 文 
字 后 面 插入 一 个 “ 交 ”， 效 果 如 下 图 所 示 。 


GC DD localhost/16/16.2.1.html 


18.2.3 ”root 选择 器 


root 选择 器 用 于 设置 页 面 根 元 素 的 样式 。 在 HTML 页面 中 ， 根 元 素 就 是 位 于 最 顶层 结构 的 
<html> 元 素 。 我 们 通过 下 面 这 段 代码 理解 root 选择 器 的 使 用 方法 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>18.2.5</title> 

<style> 

:root{ 
background:blue; 

} 

body{ 
background: red; 
color:white 

} 

</style> 

</head> 

<body> 

<h1> 这 里 是 标题 </h1> 
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<p> 这 里 是 段落 </p> 
<div> 这 里 是 div</div> 
</body> 

</html> 


在 这 段 代码 中 的 body 有 三 个 元 素 ， 分 别 是 <hl><p> 和 <div>， 我 们 先 通 过 root 选择 器 设置 整 
个 页 面 的 背景 色 为 蓝 色 , 再 通过 body 标记 选择 器 设置 body 中 所 有 元 素 的 背景 色 为 红色 , 字体 显示 
为 白色 ， 效 果 如 下 图 所 示 。 


18.2.4 ”not 选择 器 


在 HIML 页 面 中 ,元素 嵌 套 是 非常 普遍 的 事情 ， 页 面 正文 中 所 有 的 元 素 都 嵌 套 在 <body> 元 素 
中 ， 如 果 为 body 元 素 设置 背景 色 ， 而 又 不 想 让 其 子 元 素 使 用 该 样式 ， 就 可 以 使 用 not 选择 器 排除 
这 些 元 素 。 例 如 下 面 这 段 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>102 6</t1itLle> 

<style> 

body :not (hl){ 

background:blue; 
color:white 

} 

</style> 

</head> 

<body> 

<h1> 幅 套 元 素 </h1> 

<p> 幅 套 元 素 </p> 
<div> 慌 套 元 素 </div> 
</body> 

</html> 


<body> 元 素 中 嵌 套 了 三 个 元 素 ， 分 别 是 <hl><p> 和 <div>， 同 时 又 为 <body> 元 素 指定 了 背景 
色 和 前 景色 ， 如 果 不 想 让 <h1> 元 素 使 用 <body> 元 素 的 样式 ， 就 可 以 使 用 not 选择 器 将 <h1> 元 素 排 
除 ， 效 果 如 下 图 所 示 。 


第 18 章 CSS3 选择 器 | 279 


CocalhosVle/1621html 


嵌 套 元 素 


18.2.5 empty 选择 器 


empty 选择 器 用 于 指定 当 元 素 内 容 为 空 时 应 该 使 用 的 样式 。 例 如 下 面 这 段 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>18.2.7</title> 
<style> 
:empty{ 
background: red; 
} 
</style> 
</head> 
<body> 
<table border="1"> 
<tr><td> 数 据 项 </td><td></td><tqd> 数 据 项 </td></tr> 
<tr><td> </td><td> 数 据 项 </td><td></td></tr> 
</table> 
</body> 
</html> 


在 这 段 代 码 中 有 一 个 表格 ， 其 中 某 些 表 格 中 的 数据 为 空 ， 为 了 让 这 些 表 格 看 起 来 更 明显 ， 可 
以 使 用 empty 选择 器 设置 其 背景 色 为 红色 ， 效 果 如 下 图 所 示 。 


18.2.6 target 选择 器 


target 选择 器 用 于 指定 页 面 中 某 个 元 素 的 样式 。 在 使 用 target 选择 器 时 ， 需 要 根据 元 素 的 id 属 
性 指定 元 素 ， 而 元 素 的 id 又 被 当 作 页 面 中 的 超 链 接 来 使 用 ， 这 样 target 选择 器 的 样式 才能 起 作用 。 
例如 下 面 这 段 代 码 : 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>18.2.8</title> 
<style> 
:target{ 
background:red; 
font-size:24px; 
color:white; 
} 
</style> 
</head> 
<body> 
<a href="#pl"> 第 一 个 段落 </a> 
<a href="#p2"> 第 二 个 段落 </a> 
<p id="p1l"> 这 里 显示 的 是 第 一 个 段落 。</p> 
<p id="p2"> 这 里 显示 的 是 第 二 个 段落 。</p> 
</body> 
</html> 


在 这 段 代 码 中 有 两 个 <p> 元 素 ， 它 们 的 id 属性 分 别 对 应 另外 两 个 <a> 元 素 的 锚 点 ， 当 单 击 超 链 
接 时 ，target 选择 器 会 根据 选中 元 素 的 锚 点 找到 对 应 id 的 <p> 元 素 ， 并 将 设置 的 样式 应 用 到 该 元 素 
上 ， 效 果 如 下 图 所 示 。 


3 © Dlocalhost/16/ 


这 里 显示 的 是 第 


这 里 显示 的 是 第 二 个 段落 。 


18.2.7 first-child 选择 器 和 last-child 选择 器 


first-child 选择 器 和 last-child 选择 器 分 别 用 于 设置 父 元 素 中 第 一 个 和 最 后 一 个 元 素 的 样式 。 例 
如 在 一 个 <div> 元 素 中 内 嵌 了 多 个 <p> 元 素 ， 如 果 要 设置 第 一 个 <p> 元 素 和 最 后 一 个 <p> 元 素 的 样式 
与 其 他 <p> 元 素 的 样式 有 所 差别 ， 使 用 之 前 的 做 法 就 需要 对 这 两 个 <p> 元 素 添加 class 属性 ， 然 后 设 
置 相 应 的 属性 选择 器 :如果 使 用 first-child 选择 器 和 last-child 选择 器 ， 就 可 以 直接 为 第 一 个 <p> 元 
素 和 最 后 一 个 <p> 元 素 设置 不 用 的 样式 。 例 如 下 面 这 段 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>18.2.9</title> 

<style> 
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Bfirst chiLal 
background: red; 
font-size: 24px; 
color: white; 

} 

p:last-child { 
background: red; 
font-size:24px; 
color:white; 

} 

</style> 

</head> 

<body> 

<div> 
<p> 第 一 个 段落 。</p> 
<p> 第 二 个 段落 。</p> 
<p> 第 三 个 段落 。</p> 
<p> 第 四 个 段落 。</p> 

</div> 

</body> 

</html> 


在 这 段 代 码 中 ， 我 们 分 别 使 用 frst-child 选择 器 和 last-child 选择 器 为 <p> 元 素 设置 了 不 同 的 样 


式 ， 效 果 如 下 图 所 示 。 


值得 注意 的 是 ， 如 果 页 面 中 有 多 个 相同 嵌 套 结构 的 元 素 ， 那 么 first-child 选择 器 和 last-child 选 


择 器 仍然 会 对 每 个 嵌 套 的 子 元 素 应 用 样式 。 例 如 下 面 这 段 代 码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>18.2.10</title> 

<style> 

PEtirst=-Chirda 
background: red; 
font-size: 24px; 


color: white; 
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} 

p:last-child { 
background: red; 
font-size: 24px; 
color: white; 

} 

</style> 

</head> 

<body> 

<div> 
<p> 第 一 个 段落 。</p> 
<p> 第 二 个 段落 。</p> 
<p> 第 三 个 段落 。</p> 
<p> 第 四 个 段落 。</p> 

</div> 

<div> 
<p> 第 一 个 段落 。</p> 
<p> 第 二 个 段落 。</p> 
<p> 第 三 个 段落 。</p> 
<p> 第 四 个 段落 。</p> 

</div> 

</body> 

</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 


18.2.8 first-of-type 选择 器 和 last-of-type 选择 器 


first-of-type 选择 器 与 first-child 选择 器 对 应 ，last-of-type 选择 器 与 last-child 选择 器 对 应 ， 都 是 
选择 器 父 元 素 的 第 一 个 子 元 素 和 最 后 一 个 子 元 素 , 不 同 的 是 first-child 和 last-child 选择 器 不 考虑 子 
元 素 的 类 型 ， 而 first-of-type 和 last-of-type 选择 器 考虑 子 元 素 的 类 型 。 例 如 下 面 这 段 代 码 : 

<!doctype html> 

<html> 
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<head> 
<meta charset="utf-8"> 
<title>18.2.11</title> 
<style> 
.content:first-of-type { 
background: red; 
font-size: 24px; 
color: white; 
} 
.content:last-of-type { 
background: green; 
font-size: 24px; 
color: white; 
» 
</style> 
</head> 
<body> 
<div> 
<hl class="content"> 标 题 1</h1> 
<p class="content"> 第 一 个 段落 。</p> 
<hl class="content"> 标 题 2</h1> 
<p class="content"> 第 二 个 段落 。</p> 
<hl class="content"> 标 题 3</h1> 
<p class="content"> 第 三 个 段落 。</p> 
<hl class="content"> 标 题 4</h1> 
<p class="content"> 第 四 个 段落 。</p> 
</div> 
</body> 
</html> 


在 这 段 代码 中 ，<div> 元 素 的 子 元 素 有 两 种 ， 分 别 为 <hl> 元 素 和 <p> 元 素 ， 但 是 这 些 子 元 素 都 
有 相同 的 class 属性 值 。 运 行 这 段 代码 后 ， 我 们 可 以 看 到 第 一 个 <h1> 元 素 和 最 后 一 个 <p> 元 素 应 用 
了 样式 ， 效 果 如 下 图 所 示 。 
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如 果 我 们 用 firstof-type 蔡 换 first-child， 用 last-of-type 替换 last-child， 再 次 运行 代码 后 ， 就 可 
以 看 到 第 一 个 <h1> 元 素 和 <p> 元 素 应 用 了 样式 ， 最 后 一 个 <h1> 元 素 和 <p> 元 素 也 应 用 了 样式 ， 效 果 
如 下 图 所 示 。 


Eb = 区 
¢ 3 C [Blocalhost 


18.2.9 ”nth-child 选择 器 和 nth-last-child 选择 器 


nth-child 选择 器 和 nth-last-child 选择 器 是 对 first-child 选择 器 和 last-child 选择 器 的 扩展 。 
nth-child 选择 器 用 于 指定 父 元 素 中 第 几 个 元 素 的 样式 ， 而 nth-last-child 选择 器 正好 相反 ， 用 于 指定 
父 元 素 中 倒数 第 几 个 元 素 的 样式 。 这 两 个 选择 器 的 使 用 方法 如 下 : 
nth-child(n){ 
// 指 定 样式 
a nth-last-child(n){ 
// 指 定 样式 
} 


子 元 素 可 以 是 元 素 的 id 或 class 属性 , n 表示 第 几 个 子 元 素 , 如 nth-child(3) 表 示 第 三 个 子 元 素 ， 
而 nth-last-child(3) 则 表示 倒数 第 3 个 子 元 素 。 例 如 下 面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>18.2.12</title> 

<style> 

p:nth-child(2) { 
background: red; 
font-size: 24px; 
color: white; 

} 

p:nth-last-child(1) 
background: red; 


font-size: 24px; 
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Color: white; 

} 

</style> 

</head> 

<body> 

<div> 
<p> 第 一 个 段落 。</p> 
<p> 第 二 个 段落 。</p> 
<p> 第 三 个 段落 。</p> 
<p> 第 四 个 段落 。</p> 

</div> 

</body> 

</html> 


在 这 段 代码 中 , 我 们 通过 nth-child(2) 设 置 了 第 二 个 子 元 素 的 样式 , 又 通过 nth-last-child(1) 设 置 
了 倒数 第 一 个 子 元 素 的 样式 ， 效 果 如 下 图 所 示 。 


另外 ，CSS3 中 的 mn 还 可 以 用 odd 代表 奇数 ， 用 even 代表 偶数 。 例 如 下 面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>18.2.13</title> 

<style> 

p:nth-child(odd) { 
background: red; 
font-size: 24px; 
color: white; 

} 

p:nth-child(even) { 
background: green; 
font-size: 24px; 
color: white; 

</style> 

</head> 

<body> 

<div> 
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<p> 第 一 个 段落 。 
<p> 第 二 个 段落 。 
<p> 第 三 个 段落 。 
<p> 第 四 个 段落 。 

</div> 

</body> 

</html> 


</p> 
</p> 
</p> 
</p> 


在 这 段 代码 中 ， 我 们 用 p:nth-child(odd) 设 置 奇数 <p> 元 素 背 景 
设置 偶数 <p> 元 素 背 景色 为 绿色 ， 效 果 如 下 图 所 示 。 


Er 
c 


和 3 localhost/ 


色 为 红色 ， 用 p:nth-child(even) 


试 一 试 : nth-child 选择 器 表示 正 数 ， 而 nth-last-child 选择 器 表示 倒数 ， 如 果 对 同一 个 做 套 的 父 


子 元 素 同时 使 用 这 两 种 选择 器 会 有 什么 效果 ? 
18.2.10 ”nth-of-type 选择 器 和 nth-last-of-type 选择 器 


nth-of-type 选择 器 与 nth-child 对 应 ，nth-last-of-type 选择 器 与 nth-last-child 选择 器 对 应 ， 都 是 
用 于 指定 为 父 元 素 的 第 几 个 子 元 素 设置 样式 , 不 同 的 是 nth-child 和 nth-last-of-type 选择 器 忽略 子 元 
素 的 类 型 ， 而 nth-of-type 和 nth-last-of-type 选择 器 考虑 子 元 素 的 类 型 。 例 如 下 面 这 段 代 码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>18.2.14</title> 

<style> 

.content:nth-of-type(odd) { 
background: red; 
font-size: 24px; 
color: white; 

} 

.content:nth-of-type(even) { 
background: green; 
font-size: 24px; 
color: 

} 

</style> 

</head> 


white; 
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<body> 
<div> 
<hl class="content"> 标 题 1</h1> 
<p class="content"> 第 一 个 段落 。</p> 
<hl class="content"> 标 题 2</h1> 
<p class="content"> 第 二 个 段落 。</p> 
<hl class="content"> 标 题 3</hl> 
<p class="content"> 第 三 个 段落 。</p> 
<hl class="content"> 标 题 4</h1> 
<p class="content"> 第 四 个 段落 。</p> 
</div> 
</body> 
</html> 


在 这 段 代码 中 ，<div> 元 素 的 子 元 素 有 两 种 ， 分 别 为 <hl> 和 <p> 元 
同 的 class 属性 值 。 运 行 这 段 代 码 后 ， 无 论 是 标题 还 是 段落 ， 都 按照 
了 对 应 的 样式 ， 效 果 如 下 图 所 示 。 


， 但 是 这 些 子 元 素 都 有 相 
类 型 划分 了 奇偶 ， 并 设置 


B= 
CS iocaihow 8 


试 一 试 : 如 果 将 本 例 中 的 nth-oftype 和 nth-last-of-type 选择 器 替换 成 nth-child 和 nth-last-child 
选择 器 ， 会 出 现 什么 效果 ? 有 兴趣 的 读者 可 以 试 一 试 。 


18.2.11 ”循环 使 用 样式 


试想 一 下 ， 如 果 一 个 父 级 元 素 下 面 储 套 了 多 个 子 元 素 〈 具 体 多 少 个 我 们 并 不 知道 ) ， 更 麻烦 
的 是 我 们 要 将 这 些 子 元 素 分 成 m 组 ， 每 组 中 又 要 设置 多 种 样式 ， 用 以 上 介绍 的 方法 就 不 可 能 实现 
这 个 效果 .因此 ,我 们 需要 使 用 循环 的 方式 结合 以 上 介绍 的 方法 来 实现 这 个 效果 .具体 如 何 实现 呢 ? 
我 们 来 看 下 面 这 段 代 码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>18.2.15</title> 

<style> 

p:nth-child(3n+1) { 
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background: red; 
font-size: 24px; 
color: white; 

} 

p:nth-child(3n+2) { 
background: blue; 
font-size: 24px; 
color: white; 

} 

p:nth-child(3n+3) { 
background: green; 
font-size: 24px; 
color: white; 

} 

</style> 

</head> 

<body> 

<div> 
<p> 第 一 个 段落 。</P> 
<p> 第 二 个 段落 。</p> 
<p> 第 三 个 段落 。</p> 
<p> 第 四 个 段落 。</p> 
<p> 第 五 个 段落 。</p> 
<p> 第 六 个 段落 。</p> 
<p> 第 七 个 段落 。</p> 
<p> 第 八 个 段落 。</p> 

</div> 

</body> 

</html> 


在 这 段 代码 中 ， 我 们 暂且 不 考虑 具体 有 多 少 个 <p> 元 素 ， 主 要 关注 的 是 三 个 nth-child 选择 器 ， 
这 三 个 选择 器 分 别 设置 了 不 同样 式 ， 并 且 在 指定 父 元 素 的 第 几 个 子 元 素 时 ， 分 别 使 用 了 “3n+1” 
“3n+2” 和 “3n+3” 三 个 公式 ， 其 中 前 面 的 3 表示 总 共有 三 种 样式 ， 也 就 是 将 所 有 的 <p> 元 素 按 
照 3 个 一 组 进行 划分 , 而 1，2, 3 表示 对 应 的 样式 在 循环 的 过 程 中 分 别 为 每 组 中 的 第 几 个 子 元 素 应 
用 样式 。 这 段 代 码 运行 后 ， 效 果 如 下 图 所 示 。 


EEC 
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试 一 试 : 同样 的 循环 还 可 以 应 用 到 nth-oftype 和 nth-last-of-type 选择 器 中 ， 有 兴趣 的 读者 可 以 
动手 试 一 试 。 


18.2.12 ”only-child 选择 器 和 only-of-type 选择 器 


only-child 选择 器 用 于 父 元 素 只 有 一 个 子 元 素 时 使 用 的 样式 ， 而 only-of-type 选择 器 是 对 
only-child 选择 器 的 扩展 ， 在 应 用 样式 时 考虑 了 子 元 素 的 类 型 。 例 如 下 面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>18.2.16</title> 

<style> 

p:only-child { 
background: red; 
font-size: 24px; 
color: white; 

} 

</style> 

</head> 

<body> 

<div> 
<p> 第 一 个 段落 。</p> 

</div> 

<div> 
<p> 第 一 个 段落 。</p> 
<p> 第 二 个 段落 。</p> 

</div> 

</body> 

</html> 


在 这 段 代 码 中 有 两 个 <div> 元 素 , 第 一 个 <div> 元 素 供 套 了 一 个 <p> 元 素 ， 而 第 二 个 <div> 元 素 嵌 
套 了 两 个 <p> 元 素 。 使 用 only-child 选择 器 为 第 一 个 <div> 的 <p> 元 素 设置 样式 ， 效 果 如 下 图 所 示 。 


18.2.13 ”实例 : 定位 指定 元 素 


本 例 将 使 用 结构 性 伪 类 选择 器 定位 页 面 中 的 某 些 元 素 ， 并 为 其 设置 样式 。 在 Web 页 面 中 有 一 
个 列表 ,其 中 有 多 个 项 目 ， 现 在 需要 将 所 有 项 目 进行 分 组 ， 每 三 个 项 目 分 为 一 组 ， 每 组 中 各 个 项 目 
的 背景 色 不 同 ， 并 在 每 个 项 目前 添加 一 个 “ 交 ”。 相 关 代 码 如 下 : 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>18.2.17</title> 

<style> 

LE 
list-style:none; 
color:#900; 
font-size:24px; 
margin:5px auto; 
width:150px; 

} 

li:nth-child(3n+1){ 
background:#E97DCO0; 

} 

li:nth-child(3n+2){ 
background:#71ADD3; 

} 

li:nth-child(3n+3){ 
background:#87E366; 

li:before{ 
content= "ss 

} 

</style> 

</head> 

<body> 

<ul> 
<1i> 列 表 项 目 1</1i> 
<1i> 列 表 项 目 2</1i> 
<1i> 列 表 项 目 3</1i> 
<1i> 列 表 项 目 4</1i> 
<1i> 列 表 项 目 5</1i> 
<1i> 列 表 项 目 6</1i> 
<1i> 列 表 项 目 7</1i> 

</ul> 
</body> 
</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 


第 18 章 CSS3 选择 器 | 291 


日 ma = 
€ 3 C [Blocalhost/16/1622 


18.3 ”UI 元 素 状态 伪 类 选择 器 


CSS3 中 另 一 种 伪 类 选择 器 称 为 UI 元 素 状态 伪 类 选择 器 ， 使 用 这 类 选择 器 指定 的 样式 只 有 当 
元 素 处 于 某 种 状态 下 时 才 起 作用 。 本 节 将 详细 介绍 这 类 选择 器 的 使 用 方法 。 


18.3.1 E:hover、E:active 和 E:focus 选择 器 


E:hover 选择 器 用 于 指定 当 鼠 标 指针 移动 到 元 素 上 时 使 用 的 样式 ，E:active 选择 器 用 于 当 元 素 
被 激活 时 使 用 的 样式 ，E:focus 选择 器 用 于 当 元 素 获 得 光标 焦点 时 使 用 的 样式 。 这 三 种 选择 器 的 使 
用 方法 如 下 : 
< 元 素 >: 选择 器 { 
// 指 定 样式 
} 


例如 以 下 使 用 方法 : 


a:hovert{ 
background: red; 

} 

a:active{ 
background:green; 

} 

a:focus{ 
background:blue; 

} 


另外 ， 还 可 以 指定 元 素 的 类 型 。 例 如 以 下 使 用 方法 : 


input [type="text"] :hovert{ 
background: red; 

| 

input [type="text"] :active{ 
background:green; 

} 

input [type="text"] :focust{ 
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background:blue; 
} 


下 面 通过 一 个 具体 的 示例 演示 这 三 种 状态 下 如 何 设 置 元 素 的 样式 。 具 体 代 码 如 下 : 


<!doctype html> 

<html><head> 

<meta charset="utf-8"> 
<title>18.3.1</title> 

<style> 

input:focus 

{ 

background:yellow; 

} 

input:hover 

{ 

background: red; 

}》 

input:active 

{ 

background:green; 

} 

</style> 

</head> 

<body> 

<form action="#" method="get"> 

姓名 : <input type="text" name="name" /><br /> 
地 址 : <input type="text" name="address" /><br /> 
<input type="submit"” value=" 提 交 "” /> 
</form> 

</body> 

</html> 


这 段 代码 中 有 三 个 控件 ， 分 别 为 两 个 输入 框 和 一 个 按钮 ， 使 用 选择 器 设置 当 鼠 标 悬 停 在 元 素 
上 时 其 背景 色 为 红色 ， 当 元 素 获得 焦点 时 其 背景 色 为 黄色 ， 当 元 素 被 激活 时 其 背景 色 为 绿色 。 执 行 
这 段 代 码 ， 分 别 将 鼠标 悬 停 在 这 三 个 控件 上 ， 可 以 看 到 控件 的 背景 色 为 红色 ， 然 后 按键 盘 上 的 Tab 
键 , 焦点 会 在 三 个 控件 和 地 址 栏 之 间 移动 ， 此 时 控件 背景 色 显示 为 黄色 ,最 后 利用 鼠标 分 别 单 击 三 
个 控件 时 ， 控 件 背景 色 为 绿色 。 


18.3.2”E:enabled 和 E:disabled 伪 类 选择 器 
E:enabled 伪 类 选择 器 用 于 指定 当 元 素 处 于 可 用 状态 时 的 样式 ; E:disabled 伪 类 选择 器 用 于 指定 
当 元 素 处 于 不 可 用 时 的 样式 。 例 如 下 面 这 段 代码 : 


<!doctype html> 
<html> 
<head> 
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<meta charset="utf-8"> 
<title>18.3.2</title> 
<script language="javascript"> 
function change(){ 
Var rl=document .getElementById("r1"); 
Var txt=document .getElementById ("txt"); 
if(rl.checked){ 
txt.disabled=""; 
}else{ 
txt.disabled="disabled"; 


} 
</script> 
<style> 
input:enabled { 
background: yellow; 
} 
input:disabled { 
background: gray; 
} 
</style> 
</head> 
<body> 
<form> 
<input type="radio" id="rl" name="radio" checked onClick="change()" /> 启用 
<input type="radio" id="r2" name="radio"” onClick="change()"/> 禁 用 
<input type="text" id="txt"/> 
</form> 
</body> 
</html> 


在 这 段 代码 中 ,两 个 单 选 按钮 用 于 控制 文本 框 的 disabled 属性 , 当选 中 单 选 按 钮 时 ,调用 change 
方法 ,根据 当前 被 选中 单 选 按 钮 的 状态 设置 文本 框 的 disabled 属性 。 如 果 文本 框 被 启用 ， 则 背景 色 
显示 为 黄色 ， 如果 文本 框 被 禁用 ， 则 背景 色 显 示 为 灰色 ， 效 果 如 下 图 所 示 。 


国 ui 寺 素 HW 才 运 后 器 x Wa 
所 3 C Dlocalhost/16/16.3.1.html 名 六 


-ll 


18.3.3”E:read-only 和 E:read-write 伪 类 选择 器 
E:read-only 伪 类 选择 器 用 于 指定 当 元 素 处 于 只 读 时 的 样式 ，E:read-write 伪 类 选择 器 用 于 指定 
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当 元 素 处 于 读 写 状 态 时 的 样式 。 例 如 页 面 中 有 两 个 文本 框 ， 一 个 是 只 读 状 态 ， 另 一 个 是 读 写 状 态 ， 
此 时 就 可 以 使 用 这 两 个 伪 类 选择 器 分 别 为 这 两 个 文本 框 设 置 不 同 的 样式 。 具 体 代 码 如 下 : 

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>18.3.3</title> 
<style> 
input:read-only { 

background: gray; 
} 
input:read-write { 

background: yellow; 
} 
</style> 
</head> 
<body> 
只 读 : <input type="text" /><br> 
可 写 ，<input type="text" readonly/> 
</body> 
</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 


回 u 抵 系 纹 状 志 运 尝 匡 X 用 汪 
和 © D localhost/16/16.3.1.html 


内 该， PE 


二， JR 


在 Firefox 浏览 器 中 ， 这 两 个 选择 器 分 别 为 “-moz-read-only” 和 “-moz-read-write”。 
提 示 
18.3.4 ”E:checked、E:default 和 E:indeterminate 伪 类 选择 器 


E:checked 伪 类 选择 器 用 于 指定 表单 中 radio 单 选 按钮 和 checkbox 复 选 框 处 于 选中 状态 时 的 样 
式 。 例如 页 面 中 有 两 个 checkbox 类 型 的 复 选 框 ， 当 复 选 框 被 选中 时 ,使 用 E:checked 伪 类 选择 器 设 
置 复 选 框 的 边框 为 红色 。 相 关 代 码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
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<title>18.3.4</title> 
<style> 
input:checked { 
outline:red solid 2px; 
} 
</style> 
</head> 
<body> 
<input type="checkbox"> 男 </input> 
<input type="checkbox"> 女 </input> 
</body> 
</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 


CTDiocalhosVy16/163 1html [ZE 
日 男 回 女 


在 Firefox 浏览 器 中 ， 该 伪 类 选择 器 为 “-moz-checked”. 
提 示 
E:default 伪 类 选择 器 用 于 指定 当 页 面 打开 是 默认 处 于 选中 状态 的 单 选 按钮 或 复 选 框 的 样式 ， 
该 方法 设置 的 样式 不 再 受 控 件 是 否 选中 状态 的 影响 。 例 如 上 例 中 我 们 为 第 一 个 复 选 框 添加 checked 
属性 ， 代 码 如 下 : 


<input type="checkbox" checked > 男 </input> 


然后 使 用 E:default 伪 类 选择 器 设置 复 选 框 默认 选中 时 的 样式 。 代 码 如 下 : 


input:default { 
outline:blue solid 2px; 


. 


再 次 运行 这 段 代码 后 ， 效 果 如 左 图 所 示 ， 取 消 对 复 选 框 的 选中 后 ， 其 样式 依然 存在 ， 效 果 如 
右 图 所 示 。 


所 j 思 htpy/locah 轩 跟 Cl 2 | 三 志 ) 轩 hrpVilocalh 加 距 了 CC » 


回 男 口 女 口 男 口 女 
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C0 目前 只 有 Firefox 浏览 器 支持 此 属性 


提 示 

E:indeterminate 伪 类 选择 器 用 于 设置 当 一 组 单 选 按钮 中 的 任何 一 个 控件 都 没有 被 选中 时 , 这 组 
单 选 按钮 应 该 使 用 的 样式 ， 如 果 有 任何 一 个 单 选 按钮 被 选中 ， 那 么 该 选择 器 设置 的 样式 即 被 取消 。 
例如 下 面 这 段 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>18.3.5</title> 

<style> 


input:indeterminate{ 
outline:blue solid 2px; 
} 
</style> 
</head> 
<body> 
<form> 
<input type="radio" name="radio" /> 男 
<input type="radio"” name="radio"> 女 
</form> 
</body> 
</html> 


由 于 这 段 代码 中 的 两 个 单 选 按钮 都 没有 设置 默认 选中 状态 ， 所 以 当 页 面 加 载 时 ， 两 个 按钮 都 


没有 被 选中 ,此 时 E:indeterminate 伪 类 选择 器 设置 的 样式 就 会 应 用 到 这 组 单 选 按钮 上 , 效果 如 下 图 
所 示 。 


加 vt 
€ 3 © |D localhost/16/16.3.1.html 她 安 
回 男 回 女 


18.3.5”E::selection 伪 类 选择 器 


E::selection 伪 类 选择 器 用 于 设置 当 元 素 处 于 选中 状态 时 的 样式 。 例 如 页 面 中 有 一 段 文字 ， 当 
我 们 利用 鼠标 选中 这 段 文 字 时 ， 使 用 E::selection 伪 类 选择 器 设置 这 段 文字 的 背景 色 为 红色 ， 前 景 
色 为 白色 。 相 关 代 码 如 下 : 


<!gdoctype html> 
<html> 
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<head> 

<meta charset="utf-8"> 

<title>18.3.6</title> 

<style> 

Pp::selection{ 
background: red; 
color:white; 

} 

</style> 

</head> 

<body> 

<p>E: :selection 伪 类 选择 器 </p> 

</body> 

</html> 


运行 这 段 代码 后 ， 利 用 鼠标 选中 一 段 文字 ， 这 段 文字 的 背景 色 变 成 了 红色 ， 而 前 景色 变 成 了 
白色 ,效果 如 下 图 所 示 。 


[ST 
€ 3 © Dloclhost/16/16.3.1.html 一 


FE::selection 信 8 汪 国 沁 


之 前 介绍 的 伪 类 选择 器 都 使 用 的 是 一 个 冒号 (: ) ， 而 这 个 伪 类 选择 器 却 使 用 两 个 
-全 人 LE 
18.3.6 ”实例 : 用 户 界 面 新 体验 


本 例 将 创建 一 个 用 户 注册 页 面 ， 并 使 用 UI 元 素 状态 伪 类 选择 器 设置 各 个 控件 的 样式 。 我 们 先 
来 看 一 下 要 实现 的 效果 ， 如 下 图 所 示 。 
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在 这 个 注册 页 面 中 首先 要 有 一 个 标题 ， 标 题 下 面 是 需要 用 户 填写 的 用 户 名 、email、 密 码 等 信 
息 ， 然 后 是 一 个 用 户 协议 ， 最 下 面 是 一 个 立即 注册 按钮 。 除 了 标题 外 ， 其 他 信息 都 需要 放 在 一 个 


form 表单 中 ， 我 们 以 table 表格 布局 这 个 页 面 。 相 关 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>18.3.7</title> 

</head> 

<body> 

<form> 

<div> 欢 迎 注册 </div> 

<table> 

<tr><td> 用 户 编号 </td><td><input type="text" name="user_numn 

value="0123456789" readonly /></td></tr> 


<tr><td><span> 用 户 名 </span></td><td><input type="text" name="user name" 


/></td></tr> 


<tr><td><span>email</span></td><td><input type="text" name="user email" 


/></td></tr> 

<tr><td><span>》 密 码 </span></td><td><input type="password" 
name="user password" /></td></tr> 

<tr><td><span> 确 认 密 码 </span></td><td><input type="password" 
name="user confirm password" /></td></tr> 

<tr><td> 性 别 </td><td><input type="radio" id="male" name="user sex" 
checked /> 男 <input type="radio" id="female" name="user sex"” /> 女 </td></tr> 

<tr><td>Msn</td><td><input type="text" name="user msn" /></td></tr> 

<tr><td>QQ</td><td><input type="text" name="user qq" /></td></tr> 

<tr><td> 办 公 电 话 </td><td><input type="text" name="user phonel" /> 
</td></tr> 

<tr><td> 家 庭 电 话 </td><td><input type="text" name="user phone2" /> 
</td></tr> 

<tr><td> 手 机 电话 </td><td><input type="text" name="user phone3" /> 
</td></tr> 

<tr><td colspan="2"><input type="checkbox"” checked/> 我 已 看 过 并 接受 <a 
href="#">《 用 户 协议 》</a></td></tr> 


<tr><td colspan="2"><input type="button" name="submit" value=" 立 即 注册 "”/> 


</td></tr> 
</table> 
</form> 
</body> 
</html> 


运行 这 段 代 码 后 ， 我 们 看 到 是 一 个 非常 丑陋 的 注册 页 面 。 现 在 需要 为 这 个 页 面 设置 一 些 CSS 


样式 ， 让 它 看 起 来 更 舒服 。 首 先 对 页 面 中 的 整体 布局 进行 CSS 样式 设置 。 相 关 代码 如 下 : 
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<style> 

divt{ 
background:#5298D9; 
font-size:24px; 
padding:5px; 
color:white; 


} 

form{ 
border:#357FC4 solid lpx; 
color:#575454; 
width:400px; 
margin:20px auto; 
font-size:15px; 

} 

table{ 
margin:10px auto; 

} 

al 
text-decoration:none; 

} 

input [type="button"] { 
background:#349B15; 
color:white; 
font-size:15px; 
font-weight:bold; 
width:120px; 
height:40px; 

} 

</style> 


刷新 页 面 后， 我 们 可 以 看 到 如 下 图 所 示 的 页 面 ， 此 时 的 页 面 看 起 来 就 舒服 多 了 。 


和 2 © | localhost/16/16.32html 


用 户 编号 01235455789 


但 是 我 们 想 让 用 户 名 、email、 密 码 等 文字 靠 右 对 齐 ， 而 且 要 与 右边 的 输入 框 有 一 定 的 间距 ， 
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我 们 发 现 这 些 文字 在 <table> 元 素 中 都 位 于 <tr> 元 素 的 第 一 个 子 元 素 ， 此 时 就 可 以 使 用 E:firstchild 
伪 类 选择 器 设置 这 些 文字 的 样式 。 相 关 代码 如 下 : 
td:first-child{ 
text-align:right; 
padding:0 Spx; 
} 


刷新 页 面 后 的 效果 如 下 图 所 示 。 


手机 
画 我 已 看 过 并 关 受 《用 户 协议 》 


我 们 发 现 最 下 面 的 用 户 协 议和 立即 注册 按钮 因为 合并 了 列 〈<td colspan="2">) ， 也 靠 右 对 齐 
了 ,我们 希望 这 两 个 对 象 能 居中 对 齐 。 聪 明 的 你 不 难 发 现 ， 合 并 后 的 两 个 列 ， 现 在 是 <tr> 元 素 下 的 
唯一 的 子 元 素 ， 所 以 可 以 使 用 E:only-child 伪 类 选择 器 设置 它们 居中 对 齐 。 相 关 代码 如 下 : 
td:only-child{ 
text-align:center; 
font-size:12px; 


} 
刷新 页 面 后 的 效果 如 下 图 所 示 。 


要 的 
至 认 写 胡 


性 别 国内 日 


: 
办 公 申 话 
宗 许 电话 
手机 电话 
洒 拓 已 埋 这 二 近况 《用 户 当 议 》 
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看 起 来 效果 还 不 错 。 一 般 的 注册 页 面 中 都 会 有 一 些 必须 填写 的 项 目 ， 并 在 这 些 项 目的 旁边 添 
加 红色 的 星 号 ， 这 里 我 们 用 <span> 元 素 显示 必须 要 填写 的 项 目 名 称 , 用 E:before 伪 类 选择 器 在 这 些 
项 目 名 称 前 面 插入 一 个 星 号 ， 并 设置 星 号 的 颜色 为 红色 。 相 关 代码 如 下 : 
span:before{ 
content:"* ™; 
color:red; 


} 
刷新 页 面 后 的 效果 如 下 图 所 示 。 


En 

C3] 

办 全 电话 

京 吉 电话 

手记 电话 
一 天 Ed < 风 认 认 > 


因为 用 户 编号 由 系统 生成 ， 不 能 修改 ， 所 示 这 个 输入 框 设置 了 一 个 readonly 属性 ， 为 了 让 它 
看 起 来 与 别 的 输入 框 不 一 样 ， 我 们 可 以 使 用 E:read-only 伪 类 选择 器 为 其 设置 样式 。 相 关 代 码 如 下 : 


input [type="text"] :read-only{ 
border:#888484 solid 2px; 
background:#888484; 
font-weight:bold; 

} 


刷新 页 面 后 的 效果 如 下 图 所 示 。 
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最 后 , 我 们 可 以 用 E:hover 伪 类 选择 器 为 所 有 输入 框 设置 样式 , 当 鼠 标 悬 停 在 某 个 输入 框 上 时 ， 
将 改变 输入 框 的 背景 颜色 。 相 关 代码 如 下 : 
input [type="text"] :hover1{ 
background:#EFD9AC; 
. 


刷新 页 面 后 ， 将 鼠标 悬 停 在 密码 输入 框 上 ， 可 以 看 到 如 下 图 所 示 效 果 。 


至 此 ， 本 例 就 制作 完成 了 ， 有 兴趣 的 读者 还 可 以 为 用 户 名 和 密码 添加 一 些 输 入 提示 信息 ， 并 
设置 相关 样式 。 


18.4 通用 兄弟 元 素 选择 器 E ~ 上 F 


通用 兄弟 元 素 选择 器 用 于 设置 父 级 元 素 相 同 ， 子 元 素 有 多 种 类 型 ， 从 某 个 类 型 的 子 元 素 往 后 
的 其 他 子 元 素 的 样式 。 例 如 页 面 中 有 一 个 <div> 元 素 和 多 个 <p> 元 素 ， 这 些 元 素 的 父 级 元 素 都 是 
<body> 元 素 ， 而 <div> 元 素 中 又 嵌 套 了 多 个 <p> 元 素 ， 此 时 就 可 以 用 通用 兄弟 元 素 选 择 器 设置 与 
<div> 同 级 的 其 他 <p> 元 素 的 样式 。 相 关 代码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>18.4.1</title> 
<style> 
div<p { 
background: red; 
color: white; 
让 
</style> 
</head> 
<body> 
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<div> 
<p>div 内 嵌 元 素 </p> 
<p>div 内 嵌 元 素 </P> 
<p>div 内 嵌 元 素 </P> 

</div> 

<p>div 同 级 元 素 </p> 

<p>div 同 级 元 素 </p> 

<p>div 同 级 元 素 </p> 

</body> 

</html> 


运行 这 段 代 码 后， 效果 如 下 图 所 示 。 


回 I! 元 系 久 太太 运 所 用 x 于 
C 


测试 题 


(1) CSS3 中 新 增 了 哪 几 种 属性 选择 器 ? 

(2) 如 何 设置 段落 中 第 一 个 字母 或 文字 的 样式 ? 

(3) nth-child 和 nth-of-type 两 种 伪 类 选择 器 有 什么 区 别 ? 

(4) 在 不 知道 元 素数 量 的 情况 下 ， 如 何 循环 设置 元 素 的 样式 ? 
(5) E::selection 伪 类 选择 器 可 以 在 哪 种 情况 下 设置 元 素 的 样式 ? 


18.5 ”本章 小 结 


本 章 主要 介绍 了 CSS3 中 的 各 种 选择 器 ,通过 本 章 的 学 习 , 读者 应 该 掌握 属性 选择 器 、 结 构 性 
伪 类 选择 器 、UI 元 素 状态 伪 类 选择 器 和 通用 兄弟 元 素 选 择 器 的 使 用 方法 ， 并 能 灵活 运用 这 些 选择 
器 在 不 同 的 情况 下 创建 各 种 样式 。 


使 用 CSS 选择 器 插入 内 容 


在 上 一 章 中 ， 我 们 介绍 了 E:before 和 E:after 两 个 伪 元 素 选 择 器 ， 这 两 个 伪 类 选择 器 的 作用 是 
在 元 素 的 前 面 或 后 面 插入 content 属性 指定 的 内 容 。 其 实 这 两 个 属性 在 CSS 2 中 就 有 了 ， 在 CSS3 
中 又 对 这 两 个 属性 进行 了 扩展 ， 功 能 更 加 强大 ， 本 章 就 对 这 两 个 选择 器 进行 详细 的 介绍 。 


19.1 插入 文字 


使 用 E:before 和 E:after 伪 元 素 选择 器 可 以 在 指定 元 素 前 面 或 后 面 插入 指定 的 文字 ， 但 是 如 果 
页 面 中 有 多 个 相同 的 元 素 , 且 其 中 几 个 元 素 不 需要 插入 文字 , 这 就 必须 使 用 这 两 个 伪 元 素 选择 器 在 
CSS3 中 新 增 的 功能 


19.1.1 使 用 选择 器 插入 文本 


前 面 我 们 已 经 学 习 了 如 何 使 用 E:before 和 E:after 伪 元 素 选 择 器 在 元 素 前 面 或 后 面 插入 文本 ， 
现在 来 回顾 一 下 E:before 伪 元 素 选 择 器 的 示例 。 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>19.1.1</title> 
<style> 
p:before{ 
content:" 太 " 
. 
</style> 
</head> 
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<body> 

<p> 伪 元 素 选 择 器 </p> 
<p> 伪 元 素 选 择 器 </p> 
<p> 伪 元 素 选择 器 </p> 
</body> 

</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 


© 日 localhost16/16.2.1.html 


你 伪 元 素 选择 器 


妆 伪 元 素 选 择 器 
妆 伪 元 素 选择 器 


其 实在 使 用 伪 元 素 选择 器 设置 样式 的 时 候 ,除了 可 以 通过 content 属 性 设置 要 插入 的 文字 内 容 外 ， 
也 可 以 设置 其 他 样式 ， 如 颜色 、 大 小 等 。 例 如 修改 上 面 E:before 伪 元 素 选择 器 的 样式 ， 代 码 如 下 : 

p:before{ 

Content:" 廊 "7 

color:red; 

font-size:24px; 

font-weight:bold; 
} 


刷新 页 面 后 的 效果 如 下 图 所 示 。 


言 © Dlocalhost/17/17.1.1.html 


羡 伪 元 素 选 择 器 


站 伪 元 素 选 泽 句 
站 伪 元 素 选 笃 器 


19.1.2 ”插入 筛选 内 容 


从 上 面 的 示例 中 可 以 看 到 ， 一 旦 使 用 了 E:before 或 E:after 伪 元 素 选择 器 ， 页 面 中 所 有 指定 的 元 
素 都 会 应 用 该 样式 。 如 果 我 们 不 想 在 某 些 元 素 的 前 面 或 后 面 插入 内 容 ， 或 者 想 插入 其 他 的 内 容 ， 该 
如 何 实现 呢 ? 这 时 候 就 需要 为 这 些 元 素 指定 class 属性 或 id 属性 ， 在 元 素 名 称 后 面 带 上 class 属性 值 
或 i 属性 值 。 如 果 不 想 插 入 内 容 ， 可 以 设置 content 属性 为 none 或 normal。 例 如 下 面 这 段 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


306 | HTML5+CSS3+JavaScript 前 端 开发 基础 


<title>19.1.2</title> 

<style> 

p:before{ 
content:""; 
color:red; 
font-size:24px; 
font-weight:bold; 

} 

p-.no text:before{ 
content:none; 
color:red; 
font-size:24px; 
font-weight:bold; 

} 

p#other text:before{ 
content: "新 内 容 "; 
color:red; 
font-size:24px; 
font-weight:bold; 

} 

</style> 

</head> 

<body> 

<p> 伪 元 素 选 择 器 </p> 

<p class="no_text"> 伪 元 素 选 择 器 </p> 

<p id="other_text"> 伪 元 素 选择 器 </p> 

</body> 

</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 


€ 3 © Dlocalhost/7/171.1.html 


请 信 元素 迁 择 器 


伪 元 素 选 择 器 
新 内 容 伪 元 系 冯 择 器 


19.1.3 实例: CSS 制作 目录 


本 例 通过 CSS 制作 一 个 目录 效果 ， 并 在 章 前 添加 折 倒 符号 〈+) ， 在 节 前 添加 展开 符号 (-) ， 
通过 单 击 目录 章 链接 控制 目录 节 的 显示 和 隐藏 。HIML 代码 如 下 : 

<!goctype html> 

<html> 

<head> 


第 19 章 使 用 CSS 选择 器 插入 内 容 | 307 


<meta charset="utf-8"> 
<title>19.1.3</title> 
<script language="javascript"> 
function change (obj){ 
document .getElementById (obj .id) .style.display= 
document .getElementById (obj.id) .style.display== "none"?"block":"none"; 
} 
</script> 
</head> 
<body> 
<div id="mainl" class="main"><a href="#" onClick="change (child1)"> 第 1 章 
</a></div> 
<div id="childl" class="child"> 
<ul> 
<li><a href="#"> 第 1 节 </a></1i> 
<li><a href="#"> 第 2 节 </a></1i> 
<li><a href="#"> 第 3 节 </a></1i> 


</ul> 
</div> 
<div id="main2" class="main"><a href="#"” onClick="change (child2)"> 第 2 章 
</a></div> 
<div id="child2" class="child"> 
<ul> 
<li><a href="#"> 第 1 节 </a></1i> 
<1i><a href="#"> 第 2 节 </a></1i> 
<li><a href="#"> 第 3 节 </a></1i> 
</ul> 
</div> 
</body> 
</html> 


在 这 段 代码 中 ， 我 们 通过 <div> 元 素 、<ul> 元 素 、<l 这 元素 和 <a> 元 素 构 成 了 目录 的 基本 结构 。 
在 单 击 目 录 章 的 时 候 ， 根 据 JavaScript 控制 目录 节 的 显示 与 隐藏 ， 下 面 左 图 为 目录 隐藏 后 的 效果 ， 
右 图 为 目录 展开 后 的 效果 。 


回 csssls 目 好 回 csssss 人 
€ 3 © Dlocalhost/17/17.1.1.html# EE € DC ID localhost/17/17.1.1.htm 


篮 章 
重唱 
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由 于 没有 设置 任何 样式 ， 所 以 页 面 看 起 来 比较 单调 。 通 过 以 下 代码 为 页 面 设置 一 些 基本 的 样 
式 ， 效 果 如 下 图 所 示 。 

<style> 

.mainf{ 
background:#0F0E10; 
margin:lpx auto; 
padding:5; 
color:white; 
border:#0F0E10 solid lpx; 
width:200px; 

} 

div ai 
text-decoration:none; 
color:white; 
font:24px solid Arial; 


} 

ulf{ 
margin:0; 
padding:0; 
list-style:none; 

} 

tl 
background:#3F617C; 
padding:5px 07 
margin:lpx auto; 
width:200px; 

color:white; 

} 

li at 
font:18px solid Arial; 

} 

.child{ 
display:none; 

} 

</style> 


国 cssumaa = 国 cssenaa 


和 3 © | localhost/17/17.1.1him € 3 © Dlocalhost/17/1711html# 
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使 用 E:before 选择 器 为 章 所 在 <div> 元 素 插入 折 倒 符号 (+) ， 为 节 所 在 的 <div> 元 素 插入 展开 
符号 〈-) ， 并 设置 其 他 相关 样式 。 代 码 如 下 : 
.main:before{ 
Content:"+"? 
font-size:24px; 
} 
.child 11:beforef 
content: ="? 
font-size:20px; 
margin-left:30px; 
} 


刷新 页 面 后 ， 目 录 折 从 和 展开 的 效果 如 下 图 所 示 。 


回 css 刘 人 目录 


‘a CB localhost/17/17.1.1.html# © D localhost/17/17.1.1.html# 


19.2 ”插入 图 像 


使 用 E:before 或 E:after 伪 元 素 选择 器 不 仅 可 以 在 元 素 前 面 或 后 面 插入 文字 ， 还 可 以 插入 图 像 
文件 。 
19.2.1 插入 图 像 文件 的 方法 

插入 文字 时 需要 使 用 content 属性 ， 并 指定 要 插入 的 文字 ， 而 插入 图 像 的 方法 与 插入 文字 的 方 
法 类 似 , 不 同 的 是 在 指定 文字 的 地 方 指定 插入 图 像 文 件 的 url. 例如 在 <p> 元 素 的 前 面 插入 一 个 tj.gif 
图 像 ， 该 图 像 文件 与 页 面 文件 在 同一 个 目录 中 ， 可 以 使 用 下 面 这 段 代码 。 


p:before{ 
content:url (tj.gif); 
} 


另外 ， 除 了 图 像 外 ， 还 可 以 插入 音 视 频 文件 等 其 他 格式 的 文件 ， 但 是 目前 浏览 器 还 不 支持 。 
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19.2.2 ”插入 图 像 文件 的 好 处 


在 HIML 中 已 经 有 了 img 元 素 ， 该 元 素 的 主要 功能 就 是 加 载 图 像 文件 ， 这 里 为 什么 还 要 增加 
添加 图 像 的 功能 呢 ? 我 们 可 以 设想 一 下 , 在 一 个 页 面 中 有 很 多 个 列表 项 , 如 果 要 为 每 个 列表 项 都 添 
加 一 个 图 标 ， 这 将 是 一 件 非常 烦琐 的 事情 ， 即 便 使 用 JavaScript 动态 加 载 这 些 图 标 ， 在 浏览 器 解析 
页 面 的 时 候 ， 也 会 生成 很 多 重复 的 代码 。 所 以 ， 使 用 E:before 或 E:after 伪 元 素 选择 器 添加 图 像 文 
件 可 以 节省 很 多 精力 ， 在 蔡 换 图 像 文件 时 也 会 非常 方便 。 


19.2.3 实例: 列表 图 标 与 推荐 标题 


本 例 将 制作 一 个 文章 列表 效果 ， 在 页 面 中 有 很 多 文章 列表 ， 我 们 将 在 所 有 列表 的 前 面 插入 免 
费 图 标 ， 在 前 三 个 列表 的 后 面 插入 推荐 图 标 。 本 例 的 详细 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>19.2.1</title> 

<style> 

ulf{ 

list-style:none; 


margin:5px auto; 
width:300px; 

} 

Tit 
margin:1lpx auto; 

} 

li at 
font-size:20px; 
text-decoration:none; 
padding:3px; 

} 

li:beforef{ 
content:url (mf .gif); 

} 

1i.tj:after{ 
content:url (tj .gif); 

} 

</style> 

</head> 

<body> 

<ul> 
<li class="tj"><a href="#"> 飞 机 上 能 随便 调换 座位 吗 ? </a></1i> 

<li class="tj"><a href="#"> 互 联网 + 时 代 真 的 来 了 。</a></1i> 
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<li class="tj"><a href="#"> 谁 制造 了 雾 者 ? </a></1i> 
<1i><a href="#"> 为 了 一 个 小 女孩 的 尊严 。</a></1i> 
<li><a href="#"> 外 国人 如 何 看 中 国教 育 。</a></1i> 

</ul> 

</body> 

</html> 


在 这 段 代码 中 ， 我 们 先 使 用 E:before 元 素 选择 器 在 列表 的 前 面 插入 了 免费 图 标 ， 然 后 在 设置 
class 属性 的 元 素 后 面 插入 了 推荐 图 标 ， 效 果 如 下 图 所 示 。 


回 生 和 图标 
人 © D localhost/17/17.2.1.html 


妈 主 


了 女 
时 外 国人 如 何 看 中 国 


19.3 ”插入 项 目 编号 


使 用 E:before 或 E:after 伪 元 素 选择 器 不 仅 可 以 插入 文字 和 图 像 ， 还 可 以 在 多 个 项 目 中 插入 项 
目 编号 。 


19.3.1 插入 连续 项 目 编号 


要 插入 连续 的 项 目 编号 , 首先 需要 在 元 素 属性 中 指定 counter-increment 属性 , 其 属性 值 用 于 计 
数 器 的 名 称 ， 然 后 指定 选择 器 的 content 属性 值 为 计数 器 。 例 如 下 面 这 段 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>19.3-1</title> 
<style> 
pt 
counter-increment :mycounter; 
} 
p:aftert{ 
content:counter (mycounter); 
color:red; 
</style> 
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</head> 
<body> 

<p> 项 目 编号 </p> 
<p> 项 目 编号 </p> 
<p> 项 目 编号 </p> 
<p> 项 目 编号 </p> 
<p> 项 目 编号 </p> 
</body> 
</html> 


在 这 段 代 码 中 我 们 为 <p> 元 素 指定 了 一 个 名 为 mycounter 的 计数 器 , 然后 使 用 E:after 选择 器 设 
置 项 目 编号 ， 并 设置 编号 颜色 为 红色 ， 效 果 如 下 图 所 示 。 


19.3.2 在 项 目 编号 中 追加 文字 


除了 直接 添加 项 目 编号 外 ， 还 可 以 在 项 目 编号 中 追加 文字 。 其 方法 是 将 要 追加 的 文字 与 计数 
器 一 同 视 为 content 属性 的 值 。 例 如 下 面 这 段 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>19.3.2</title> 
<style> 
pt 
counter-increment :mycounter; 
} 
p:before{ 
content:" 第 "counter (mycounter) "个 "; 
color:red; 


} 

</style> 
</head> 
<body> 

<p> 项 目 编号 </p> 
<p> 项 目 编号 </p> 
<p> 项 目 编号 </p> 
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<p> 项 目 编号 </p> 
<p> 项 目 编号 </p> 
</body> 
</html> 


运行 这 段 代码 后 的 效果 如 下 图 所 示 。 


@ | localhost/17/173.1.html 


第 1 个 项 目 编号 
第 2 个 项 目 编号 
第 3 个 项 目 编号 
第 4 个 项 目 编号 
第 5 个 项 目 编号 


19.3.3 设置 编号 种 类 


除了 数字 编号 外 ， 还 可 以 插入 字母 编号 、 罗 马 数 字 编 号 等 其 他 种 类 的 编号 ，list-style-type 的 属 
性 值 都 可 以 作为 编号 的 种 类 。 有 了 编号 种 类 后 , 只 需要 将 编号 种 类 的 名 称 添加 到 选择 器 样式 计数 器 
后 面 即 可 。 例 如 下 面 这 段 代码 ， 将 在 <p> 元 素 前 面 插入 大 写 罗马 字母 编号 : 

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>19.3.3</title> 
<style> 
pt 
counter-increment :mycounter; 

p:before{ 
content:" 第 "counter (mycounter,upper-roman) "个 "; 
color:red; 

} 

</style> 

</head> 

<body> 

<p> 项 目 编号 </p> 

<p> 项 目 编号 </p> 

<p> 项 目 编号 </p> 

<p> 项 目 编号 </p> 

<p> 项 目 编号 </p> 

</body> 

</html> 


运行 这 段 代 码 后， 效果 如 下 图 所 示 。 
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@ {BD localhost/17/17.3.1.html 


第 I 个 项 目 编号 
第 II 个 项 目 编号 
第 III 个 项 目 编号 
第 IY 个 项 目 编号 
第 Y 个 项 目 编号 


19.3.4 ”插入 访 套 编号 


对 于 多 种 元 素 类 型 的 列表 项 目 ， 还 可 以 使 用 嵌 套 编号 ， 让 列表 项 目的 显示 更 有 层次 。 首 先 需 
要 分 别 对 每 层 项 目 设置 计数 器 ， 然 后 使 用 E:before 或 E:after 选择 器 插入 编号 。 例 如 下 面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>19.3.4</title> 

<style> 

hl{ 
counter-increment:chapter; 
font-size:24px; 

} 

h2{ 
counter-increment:section; 
font-size:16px; 

} 

hl:before{ 
content:" 第 "counter (chapter); 

} 

h2:before{ 
content:" 第 "counter (section); 
margin-left:40px; 

} 

</style> 

</head> 

<body> 

<hl> 章 </h1l> 

<h2> 节 </h2> 

<h2> 节 </h2> 

<h2> 节 </h2> 

<h1> 章 </h1> 

<h2> 节 </h2> 

<h2> 节 </h2> 

<h2> 节 </h2> 
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</body> 
</html> 


运行 这 段 代 码 后 ,效果 如 下 面 左 图 所 示 。 但 是 第 2 章 是 从 第 4 节 开 始 的 ， 如 果 想 让 它 也 从 第 1 
节 开 始 ， 就 需要 在 <h1> 元 素 中 重 置 <h2> 元 素 的 计数 器 。 使 用 方法 如 下 : 
hl{ 
counter-increment :chapter; 
counter-reset:section; 
font-size:24px; 


} 
刷新 页 面 后 的 效果 如 下 面 右 图 所 示 。 


EE x 
OC Slocalhosi7/1 


另外 ， 还 可 以 将 上 一 级 编号 嵌 套 在 下 一 级 编号 中 显示 。 此 时 需要 在 插入 下 一 级 编号 时 ， 将 上 
一 级 编号 的 计数 器 添加 到 content 属性 值 中 。 例 如 下 面 这 段 代 码 : 
h2:before{ 
content:" 第 "counter (chapter)"."counter (section); 
margin-left:40px; 
} 


刷新 页 面 后 的 效果 如 下 图 所 示 。 


19.3.5 在 字符 串 两 边 添加 灸 套 文字 编号 


除了 插入 计数 器 编号 外 ， 还 可 以 在 字符 串 两 边 添加 嵌 套 文字 编号 。 首 先 需 要 在 元 素 的 quotes 
属性 中 指定 文字 编号 的 内 容 ， 然 后 指定 样式 的 content 属性 值 为 open-quote 或 close-quote， 前 者 表 
示 在 字符 串 开 始 嵌 套 的 文字 编号 ， 后 者 表示 在 字符 串 结束 嵌 套 的 文字 编号 。 例 如 下 面 这 段 代码 : 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>19.3.5</title> 
<style> 
pt 
quotes:"[""]"; 
} 
p:before{ 
content :open-quote; 
} 
p:after{ 
content:close-quote; 
} 
</style> 
</head> 
<body> 
<p> 项 目 编号 </p> 
<p> 项 目 编号 </p> 
<p> 项 目 编号 </p> 
</body> 
</html> 


在 这 段 代 码 中 ， 首先 指定 <p> 元 素 的 quotes 属性 值 为 "[""]"， 然 后 在 <p> 元 素 的 开始 和 结束 分 别 
指定 content 的 属性 值 为 open-quote 和 close-quote， 效 果 如 下 图 所 示 。 


D localhost/17/17.3.1.html 尽 妆 局 


由 于 quotes 的 属性 值 是 字符 串 ， 已 经 有 了 双 引 号 ， 所 以 如 果 将 要 添加 的 文字 编号 为 双 引号 ， 
就 需要 添加 转 义 符 。 使 用 方法 如 下 : 


Bf{ 
OCR RN 
} 


19.3.6 ”实例 : 导航 菜单 
本 例 将 制作 一 个 带 图 片 的 导航 菜单 ， 效 果 如 下 图 所 示 。 
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localhost/17/17. 


首先 在 <body> 元 素 中 创建 一 个 <div> 元 素 ， 以 此 为 容器 将 整个 导航 菜单 放 到 这 个 容器 内 ， 然 后 
用 无 序列 表 创 建 导航 菜单 ， 并 填写 菜单 内 容 。 相 关 代码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>19.3.6</title> 
</head> 
<body> 
<div id="nav"> 
<ul> 
<li><a href="#" id="home img"></a></1i> 
<1i><a href="#">Home</a></1i> 
<1i><a href="#" id="About">About</a></1i> 
<li><a href="#" id="Products">Products</a> 
<ul> 
<li><a href="#" id="Web">Web</a></1i> 
<li><a href="#" id="Print">Print</a></1i> 
<li><a href="#" id="Photos">Photos</a></1i> 
</ul> 
</1i> 
<li><a href="#" id="Contact">Contact</a></1i> 
</ul> 
</div> 
</body> 
</html> 


运行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 
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© Dlocalhost/17/17. 


ome 


About 


Products 
° Yeb 

° Erint 

© Photos 
» Contact 


默认 的 外 边 距 和 内 边 距 , 设置 <body> 
的 样式 。 相 关 代 码 如 下 : 


现在 我 们 开始 一 步 步 为 这 个 导航 菜单 添加 样式 。 首先 清 
元 素 的 背景 色 和 导航 菜单 容器 的 样式 ， 并 清除 默认 无 序 负 
i 
margin: Opx; 
padding: Opx; 


} 

body{ 
background:#383C45; 

} 

#nav { 
font-family: arial, sans-serif; 
position: relative; 
width: 420px; 
height: 56px; 
font-size: 14px; 
color: #999; 
margin: 0 auto; 

} 

#nav ul { 
list-style-type: none; 

} 


刷新 页 面 后 的 效果 如 下 图 所 示 。 


回 ss=s 
€ > C |D localhost/] 


然后 设置 <li> 元 素 的 样式 , 让 其 向 左 浮动 , 这 样 导 航 菜单 就 会 水 平 显示 , 同时 设置 其 相对 定位 ， 
这 样 <li> 元 素 就 成 为 一 个 根 元 素 ， 并 设置 其 背景 色 和 外 边框 宽度 。 相 关 代码 如 下 : 
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#nav ul li { 
float> eft? 
position: relative; 
background: #EFEFEF; 
margin-top:1px; 


上 
刷新 页 面 后 的 效果 如 下 图 所 示 。 


下 面 设置 超 链接 的 样式 ， 同 时 第 一 个 <li> 元 素 使 用 不 同 的 样式 。 相 关 代码 如 下 : 


#nav ul li a:not(#home img) { 
text-align: center; 
border-right: lpx solid #999; 
padding: 20px; 
display: block; 
text-decoration: none; 
color: #999; 

} 

#home img { 
text-align: center; 
border-right: lpx solid #999; 
padding: 12px 20px llpx 20px; 
display: block; 

二 


刷新 页 面 后 的 效果 如 下 图 所 示 。 
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` 面 通过 设置 display 属性 将 子 菜单 隐藏 起 来 ， 然 后 使 用 E:hover 选择 器 设置 样式 ， 当 鼠标 停 
留 在 主 菜单 上 时 ， 通 过 display 属性 显示 子 菜单 ， 并 设置 子 菜单 绝对 定位 。 相 关 代码 如 下 : 


#nav ul li ul { 


display: none 

} 

#nav ul li:hover ul { 
display: block; 
position: absolute; 

} 


刷新 页 面 后 ， 当 鼠标 停留 在 主 菜单 上 时 显示 子 菜单 ， 当 鼠标 离开 时 隐藏 主 菜单 ， 效 果 如 下 图 所 示 。 


下 面 设置 当 和 鼠标 停留 在 主 菜单 上 时 子 菜单 的 样式 ， 以 及 鼠标 停留 在 某 个 子 菜单 项 上 时 ， 该 子 
菜单 项 的 样式 。 相 关 代码 如 下 : 

#nav ul li:hover ul li a { 
display: block; 
background: #C6C7CB; 
width: 110px; 
text-align: center; 
border-bottom: lpx solid #f2f2f2; 
border-right: none; 

} 

#nav ul li:hover ul li a:hover { 
background: #39ACD9; 

} 


刷新 页 面 后 ， 当 鼠标 停留 在 子 菜单 项 上 的 效果 如 下 图 所 示 。 
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最 后 在 第 一 个 菜单 中 插入 图 片 。 相 关 代码 如 下 : 


#home img:beforef 
content:url (home .bmp) 7 


至 此 ， 我 们 就 完成 了 导航 菜单 的 制作 。 剧 新 页 面 后 ， 将 鼠标 停留 在 子 菜单 上 ， 效 果 如 下 图 所 示 。 


测试 题 

(1) 使 用 CSS3 如 何 为 部 分 列表 选项 插入 文字 ? 
(2) 插入 文字 和 插入 图 像 有 什么 区 别 ? 

(3) 如 何 设置 插入 编号 的 种 类 ? 

(4) 使 用 CSS3 如 何 实现 多 级 目录 结构 ? 


19.4 ”本 章 小 结 


本 章 主要 介绍 了 CSS3 中 使 用 E:before 和 E:after 元 素 选择 器 插入 文字 、 图 像 和 项 目 编号 的 使 
用 方法 ,通过 本 章 的 学 习 , 读者 应 该 熟练 掌握 这 两 种 选择 器 的 使 用 方法 ， 并 能 灵活 运用 ,创建 出 更 
加 多 丰富 的 CSS 效果 。 


使 用 CSS 设置 文本 样式 


文本 是 Web 页 面 上 承载 信息 比较 直接 的 一 种 方式 , 在 CSS 中 提供 了 丰富 的 文本 样式 ， 使 用 这 
些 样式 可 以 控制 文本 的 字体 、 大 小 、 颜 色 等 很 多 属性 ， 还 可 以 控制 文本 段落 的 各 种 样式 ， 以 及 创建 
具有 阴影 效果 的 文本 。 


20.1 控制 文本 样式 


网 页 上 文本 的 所 有 属性 都 由 文本 样式 控制 ，CSS 中 文本 的 样式 有 很 多 种 ， 本 节 主 要 介绍 一 些 
常用 的 文本 样式 。 


20.1.1 文本 字体 和 大 小 
在 前 面 的 很 多 示例 中 我 们 都 使 用 过 文本 字体 和 大 小 属性 ， 主 要 用 于 控制 显示 文本 的 外 观 。 例 
如 以 下 样式 用 于 控制 文本 的 字体 和 大 小 ， 效 果 如 下 图 所 示 。 


pt 
font-family: 宋 体 , Arial; 
font-size:24px; 


回 和 D+ 
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文本 样式 


Font Style 
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font-family 用 于 设置 文本 字体 的 属性 ， 其 值 可 以 是 一 个 也 可 以 是 多 个 。 当 设置 多 种 字体 时 ， 哪 
种 字体 是 最 终 的 显示 效果 呢 ? 因 为 网 页 上 文本 显示 什么 字体 , 并 不 是 由 服务 端 决定 的 , 而 是 根据 用 
户 客 户 端 系统 上 安装 的 字体 决定 的 。 如 果 页 面 上 设置 了 多 种 字体 , 而 在 客户 端 上 并 没有 安装 第 一 种 
字体 ， 系 统 就 会 去 寻找 第 二 种 字体 ; 如 果 第 二 种 字体 也 找 不 到 ， 系 统 就 会 依次 往 后 寻找 ; 如 果 都 找 
不 到 ， 就 会 以 默认 字体 显示 。 

font-size 用 于 设置 文本 大 小 的 属性 ， 也 称 为 字号 ， 其 值 是 最 小 为 9， 最 大 为 36 的 正 数 ， 单 位 
为 px (像素 ) ， 也 可 以 是 系统 设置 的 large、larger、medium、small、smaller、x-large、x-small、 
xx-large 和 xx-small。 


20.1.2 文本 颜色 和 粗细 


在 HIML 页 面 中 , 文本 颜色 统一 用 RGB 模式 显示 , 每 种 颜色 都 由 红 、 绿 、 蓝 三 种 颜色 按照 不 
同 的 比例 组 成 。color 属性 用 于 设置 文本 的 颜色 ， 颜 色 值 可 以 是 颜色 的 英文 名 称 、6 位 十 六 进 制 数 、 
3 位 十 进 制 数 或 百分比 等 多 种 形式 。 例 如 下 面 这 段 代 码 中 ， 虽 然 样式 的 值 不 同 ， 但 都 表示 同 红色 。 

color:red; 

color:rgba(255,0,0,1.00); 

color:#FF0000; 

color:hsla(0,100%,50%,1.00); 


在 CSS 中 可 以 使 用 font-weiht 属性 设置 文本 的 粗细 ， 其 值 可 以 是 normal (正常 粗细 )、bold 
( 粗 体 ) 、bolder (加 粗 体 ) 、lighter 〈 比 正常 粗细 还 细 ) ， 或 者 是 100~900， 每 100 升 一 个 层次 ， 
共 9 个 层次 ， 值 越 大 ， 字 体 越 粗 。 

在 实际 使 用 中 ， 大 多 数 操作 系统 和 浏览 器 都 会 智能 设置 正常 和 加 粗 两 种 粗细 的 字体 。 示 例如 下 : 

font-weight:normal; 

font-weight:hold; 


另外 , 元 素 <b> 和 <strong> 的 默认 样式 中 字体 都 是 加 粗 的 , 而 搜索 引擎 又 偏爱 网 页 中 的 <strong> 
元 素 ， 为 了 保持 页 面 的 统一 风格 ， 可 以 使 用 normal 属性 值 设置 该 元 素 字体 的 粗细 。 例 如 下 面 这 段 
代码 ， 效 果 如 下 图 所 示 。 

<strong>strong 默认 粗细 </strong><br> 

<strong style="font-weight:normal;">strong 正常 粗细 </strong><br> 
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strong 上 默认 粗细 
strong 正 常 粗细 


20.1.3 ”斜体 文本 


CSS 中 的 font-style 属性 用 于 控制 字体 的 倾斜 ,其 值 分 别 为 normal (正常 ) 、italic (意大利 体 》 
和 oblique (倾斜 》。 例 如 下 面 这 段 代码 分 别 设置 了 这 三 种 样式 ， 效 果 如 下 图 所 示 。 
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<strong style="” font-style:normal7"> 正 常 字体 </strong><br> 
<strong style="” font-style:italic;">italic 倾斜 字体 </strong><br> 
<strong style="” font-style:oblique;">oblique 倾斜 字体 </strong> 
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20.1.4 文本 装饰 


CSS 中 的 text-decoration 属性 用 于 装饰 文本 , 其 共有 5 个 值 , 分 别 为 none (无 装饰 ) 、underline 
(下 画 线 ) 、overline (上 画 线 ) 、line-through (贯穿 线 ) 和 blink (文本 闪烁 ) 。 例 如 下 面 这 段 代 
码 分 别 设置 了 这 几 种 文本 样式 : 


<P 
<p 
<p 
<p 
<a 


style="text-decoration:overline;"> 上 夯 线 </p> 
style="text-decoration:underline;"> 下 夯 线 </p> 
style="text-decoration:line-through; "> 人 贯穿 线 </p> 
style="text-decoration:blink; "> 文本 闪烁 </p> 
style="text-decoration:none;"” href="#"> 这 是 超 链接 </a> 


运行 这 段 代码 后 , 你 会 发 现 设置 了 text-decoration:blink 样式 的 文本 并 没有 闪烁 , 这 是 因为 这 个 
效果 使 用 的 很 少 ， 目 前 已 没有 浏览 器 支持 此 属性 。 另 外 ，<a> 元 素 中 的 文本 都 会 有 一 个 下 画 线 ， 当 
我 们 使 用 了 text-decoration:none 样式 后 ， 下 滑 线 就 消失 了 ， 在 实际 应 用 中 这 个 属性 很 常用 ， 经 常用 
于 统一 页 面 文本 的 风格 ， 效 果 如 下 图 所 示 。 


20.1.5 ”英文 字母 大 小 写 转换 


CSS 中 的 text-transform 属性 用 于 控制 英文 字母 的 大 小 写 转换 , 它 的 值 有 三 个 , 分 别 为 capitalize 
(单词 首 字母 大 写 ) 、uppercase (全 部 大 写 ) 和 lowerocase (全 部 小 写 ) 。 例 如 页 面 中 有 一 段 英文 
字母 ， 分 别 对 其 应 用 这 三 种 样式 后 ， 效 果 如 下 图 所 示 。 


<p 
<p 
<p 
<p 


style="text-transform:none"> 无 样式 效果 : hello WORLD</p> 
style="text-transform:1lowercase; "> 全 部 小 写 效 果 : hello WORLD</p> 
style="text-transform:uppercase; "> 全 部 大 写 效果 : hello WORLD</p> 
style="text-transform:capitalize;"> 首 字母 大 写 效果 : hello WORLD</p> 
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无 样式 效果 : hello WORID 


全 部 小 写 效果 : hello world 
全 部 大 写 效果 ，HELLO WORLD 
首 闻 母 大 写 效果 : Hello WORLD 


20.1.6 实例: 综合 应 用 文本 样式 


本 例 将 综合 运用 各 种 文字 样式 对 页 面 中 的 一 段 文 字 进 行 修饰 。 在 本 例 中 ， 设 置 默 认 字 体 为 
Arial， 字 号 为 18px， 文 本 颜色 为 红色 ， 全 局 统一 字体 粗细 ， 对 关键 词汇 添加 下 画 线 并 使 用 斜体 ， 
所 有 英文 首 字母 大 写 。 完 整 的 示例 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 控 制 文本 样式 </title> 

<style> 

pt{ 
font-family:Arial; 
font-size:18px; 
color:red; 
text-transform:capitalize; 

} 

strong{ 
text-decoration:underline; 
font-style:italic; 
font-weight:normal; 

} 

</style> 

</head> 

<body> 

<p>css 即 <strong> 层 有 登 样式 表 </strong> (<span>cascading stylesheet</span>) 。 在 

网 页 制作 时 采用 <strong> 层 又 样式 表 </strong> 技 术 ， 可 以 实现 对 页 面 的 布局 、 字 体 、 颜 色 、 背 景 及 其 
他 效果 的 精确 控制 。</p> 
</body> 
</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 
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Css 即 刁 送 大 直 去 (Cascading Stylesheet) - 采用 层 香 陛 式 二 法 术 ， 可 以 有 
领 色 权 制 - 


效 地 对 页 面 的 布局、 字体 、 颜 色 、 背 景 和 其 它 效果 实现 更 加 精确 


20.2 ”控制 段落 样式 


文本 样式 的 另 一 个 应 用 是 控制 段落 的 样式 ， 包 括 段落 水 平 、 垂 直 对 齐 、 行 间距 和 字 间 距 ， 以 
及 段落 首 字 下 沉 的 特殊 效果 ， 本 节 将 详细 介绍 如 何 设置 这 些 样式 。 


20.2.1 段落 水 平 对 齐 


CSS 中 通过 text-align 属性 设置 段落 水 平 对 齐 方式 ， 分 别 为 left ( 左 对 齐 ) 、right ( 右 对 齐 ) 、 
center (居中 对 齐 ) 、justify (两 端 对 齐 ) 、start (与 开始 边界 对 齐 ) 和 end (与 结束 边界 对 齐 ) 。 
例如 下 面 的 示例 中 ， 为 了 更 好 地 展示 各 种 对 齐 效果 ， 特 别 设置 了 <p> 元 素 的 边框 。 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 控 制 段落 样式 </title> 

<style> 

pi 

border: lpx solid; 
margin: Spx; 

} 

#1eftE 

text-align: left; 

于 

#right { 

text-align:right; 

上 

#center { 

text-align: center; 

L 

#justify { 

text-align:justify; 
width:190px; 
height:60px; 

， 

#start { 


text-align:start; 
} 
#end { 
text-align:end; 
} 
</style> 
</head> 
<body> 
<p id="left"> 这 段 文字 左 对 齐 </p> 
<p id="right"> 这 段 文字 右 对 齐 </p> 
<p id="center"> 这 段 文 字 居中 对 齐 </p> 
<p id="justify"> 这 段 文字 两 端 对 齐 ， 除 了 最 后 一 行文 本 外 ， 其 他 每 行文 本 都 是 两 端 对 齐 </P> 
<p id="start"> 这 段 文字 与 开始 边界 对 齐 </P> 
<p id="end"> 这 段 文 字 与 结束 边界 对 齐 </p> 
</body> 
</html> 


这 段 代 码 中 ， 只 有 两 端 对 齐 比较 特殊 ， 即 只 有 当 文 本 长 度 大 于 一 行 时 才 会 看 到 效果 ， 如 下 图 
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辽 段 文字 二 对 齐 。 
[L 这 段 文字 右 对 这 
这 段 文字 屠 中 对 齐 


隐 破 文字 两 问 对 乔 ， 陈 了 
隐 后 一 行文 本 外 ， 其 他 得 
行文 本 者 是 册 端 对齐 


下 


这 段 文 字 与 结束 边界 对 齐 


20.2.2 ”段落 垂直 对 齐 


CSS 中 的 vertical-align 属性 用 于 设置 段落 垂直 对 齐 方式 .垂直 对 齐 的 方式 与 段落 中 文本 和 图 像 
的 高 度 有 关 ， 它 的 值 有 以 下 几 种 。 


(1) baseline: 默认 样式 。 元 素 放 置 在 父 元 素 的 基线 上 。 
(2) sub: 垂直 对 齐 文本 的 下 标 。 

(3) super: 垂直 对 齐 文本 的 上 标 。 

(4) top: 把 元 素 的 顶端 与 行 中 最 高 元 素 的 顶端 对 齐 。 

(5) text-top: 把 元 素 的 顶端 与 父 元 素 字体 的 顶端 对 齐 。 
(6) middle: 把 元 素 放置 在 父 元 素 的 中 部 。 

(7) bottom: 把 元 素 的 顶端 与 行 中 最 低 元 素 的 顶端 对 齐 。 
(8) text-bottem: 把 元 素 的 底 端 与 父 元 素 字体 的 底 端 对 齐 。 
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为 了 便于 演示 这 些 对 齐 方式 的 效果 ， 我 们 在 页 面 中 分 别 设置 参照 对 象 。 代 码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 控 制 段落 样式 </title> 
<style> 
pi 
color: white; 
border: lpx solid black; 


} 
span { 
background: blue; 
} 
“refli 区 
font-size: 30px; 
background: red; 
} 
.ref2 { 
font-size: 9px; 
background: green; 
3 


.baseline { 
vertical-align: baseline; 


} 


.sub { 
vertical-align: sub; 
} 
.super { 
vertical-align: super; 
了 
.top { 
Vertical-align: top; 
} 
text-top { 
vertical-align: text-top; 
} 
.middle { 
vertical-align: middle; 
} 
.bottom { 


Vertical-align: bottom; 
} 
.七 ext-bottem { 
vertical-align: text-bottem; 
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</style> 
</head> 
<body> 
<p> 
<span 
<span 
<span 
<span 
<span 
</p> 
<p> 
<span 
<span 
<span 
<span 
<span 
</p> 
<p> 
<span 
<span 
<span 
<span 
<span 
</p> 
<p> 
<span 
<span 
<span 
<span 
<span 
</p> 
</body> 
</html> 


"ref1"> 高 参照 </span> 
baseline">baseline 效果 </span> 
class="ref2"> 低 参照 </span> 
class="sub">sub 效果 </span> 
class="refl"> 高 参照 </span> 


class="refl"> 高 参照 </span> 
class="super">super 效果 </span> 
class="ref2"> 低 参照 </span> 
class="top">top 效果 </span> 
class="refl"> 高 参照 </span> 


"ref1"> 高 参照 </span> 
text-top">text-top 效果 </span> 
class="ref2"> 低 参照 </span> 
class="middle">middle 效果 </span> 
class="refl1"> 高 参照 </span> 


class="refl"> 高 参照 </span> 
class="bottom">bottom 效果 </span> 
class="ref2"> 低 参照 </span> 


class="text-bottem">text-bottem 效果 </span> 


class="refl"> 高 参照 </span> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 
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20.2.3” 行 间距 和 字 间 距 


CSS 中 的 line-height 属性 用 于 设置 文本 段落 的 行 间距 ，letter-spacing 属性 用 于 设置 文本 段落 的 
字 间 距 。 例 如 下 面 示例 中 的 第 一 段 文字 采用 系统 默认 的 样式 ， 而 第 二 段 文字 的 行 间距 设置 为 50px， 
字 间 距 设 置 为 Spx。 相 关 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 控 制 段落 样式 </title> 

<style> 

pt 

color: white; 
border: lpx solid black; 
background:#8089CD; 

} 

.p2{ line-height:50px; letter-spacing:5px;} 

</style> 

</head> 

<body> 

<p> 这 段 文字 的 行 间距 和 子 间距 将 根据 样式 进行 相应 的 调整 。</P> 

<p class="p2"> 这 段 文字 的 行 间距 和 子 间距 将 根据 样式 进行 相应 的 调整 。</P> 

</body> 

</html> 


效果 如 下 图 所 示 。 


这 段 文 字 的 行 间距 和 子 间距 将 根据 样式 进行 相应 的 调整 


这 段 文字 的 行 同 距 和 子 间距 将 根据 样式 进行 相应 的 调整 。 


试 一 试 : 在 设置 行 间距 时 ， 还 可 以 为 其 指定 不 带 单位 的 数值 ， 此 时 设置 的 行 间距 为 默认 行 间 
距 倍数 ， 有 兴趣 的 读者 可 以 动手 试 一 试 。 


20.2.4 段落 首 字 下 沉 


我 们 经 常会 在 一 些 书籍 中 看 到 首 字 下 沉 的 效果 , 在 CSS 中 ,通过 E:firstletter 选择 器 可 以 为 段 
落 的 首 字母 设置 样式 ， 实 现 首 字 下 沉 的 效果 。 例 如 下 面 这 段 代 码 : 

<!doctype html> 

<html> 
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<head> 
<meta charset="utf-8"> 
<title> 控 制 段落 样式 </title> 
<style> 
Pp:first-letter { 
float: left; 
margin-right: Spx; 
color: #550000; 
font-size: 35px; 
} 
</style> 
</head> 
<body> 
<p> 人 生 当 自 勉 ， 学 习 需 坚持 。 从 这 一 刻 开始 ， 我 依旧 是 我 ， 只 是 心境 再 不 同 。 不 论 今后 的 路 如 何 ， 
我 都 会 在 心底 默默 鼓励 自己 ， 坚 持 不 懈 ， 等 待 那 一 场 破 草 的 美丽 。</p> 
</body> 
</html> 


在 这 段 代码 中 ， 使 用 E:first-letter 选择 器 将 段落 的 首 字母 向 左 浮动 ， 然 后 设置 外 边 距 、 颜 色 和 
字体 属性 ， 这 样 就 可 以 实现 首 字 下 沉 的 效果 了 ， 如 下 图 所 示 。 
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生 当 自 勉 ， 学 习 和 需 坚持 。 从 这 一 刻 开始 ， 我 依旧 是 我 ， 只 是 心境 


再 不 同 ,不论 今后 的 路 如 何 ， 我 都 会 在 心底 扶 默 鼓励 自己 ， 坚 持 
不 懈 ， 等 待 那 一 场 破 音 的 美丽 


20.2.5 实例 : 段落 排版 


本 例 将 综合 运用 段落 样式 对 页 面 中 的 一 段 文字 进行 排版 。 在 本 例 中 ， 要 求 段落 首 字 下 沉 两 行 ， 
段落 内 容 水 平 左 对 齐 且 垂直 居中 对 齐 ， 行 间距 为 1.5， 字 间距 为 3px。 详 细 代码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 控 制 段落 样式 </title> 
<style> 
p:first-letter { 
floats left? 
margin-right: Spx; 
color: #550000; 
font-size: 30px; 
font-weight:bold; 
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Pi 
text-align:left; 
vertical-align:middle; 
line-height:1.5; 
letter-spacing:3px; 
上 
</style> 
</head> 
<body> 
<p> 初 冬 的 阳光 充满 淡淡 的 暖 暖 味道 ， 行 走 在 陡 陌 红尘 里 ， 安 之 若 素 的 你 如 一 绪 清 风 ， 轻 轻 拂 过 我 的 
眼前 ， 留 下 阵 阵 余 香 。 你 从 繁华 中 浅 笑 而 来 我 掠 过 地 平 线 上 的 日 光 , 才 看 清 你 的 脸颊 ， 吹 弹 可 破 的 肤 质 光 
滑 ， 端 庄 温柔 ， 腰 间 一 泻 千 里 的 秀 发 随 风 飘 飘扬 扬 。 我 轻 如 浮云 ， 淡 如 静水 ， 冷 似 冰山 ， 近 我 者 ， 皆 免不了 
遍体鳞伤 ， 而 你 却 不 以 为 然 。</p> 
</body> 
</html> 


执行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 


[BE 
© Blocalhost/18/18.2.1.html 


清风 ， 轻 轻 拂 过 我 的 眼前 ， 窗 下 阵 阵 
从 第 华中 浅 笑 而 来 ， 我 掠 过 地 平 线 上 的 日 光 ， 才 看 清 你 的 胎 闫 
吹 弹 可 破 的 肤 质 光滑 ， 端 庄 温柔 ， 原 间 一 海 千 星 的 秀 发 建 风 际 车 
扬扬 。 我 轻 如 浮云 ， 淡 如 殉 水 ， 冷 似 冰 山 ， 近 我 者 ， 芭 免不了 中 
体 鲜 伤 ， 而 你 却 不 以 为 然 : 


和 冬 的 阳光 充 洪 淡 淡 的 咀 暖 味道 ， 行 走 在 际 隔 红 竺 旦 ， 安 之 
紊 的 公 


20.3 ”CSS3 中 为 文本 添加 阴影 一 一 text-shadow 属性 


在 CSS3 中 可 以 使 用 text-shadow 属性 为 页 面 中 的 文字 添加 阴影 效果 ， 也 可 以 为 阴影 指定 位 移 
距离 、 模 糊 半径 和 颜色 ， 还 可 以 制作 多 个 阴影 的 文字 效果 。 


20.3.1 text-shadow 属性 的 使 用 方法 
在 使 用 text-shadow 属性 时 ， 需 要 为 其 指定 4 个 参数 。 


text-shadow: length length length color; 


其 中 第 一 个 参数 length 是 指 阴影 离开 文字 的 横向 距离 ， 第 二 个 参数 length 是 指 阴 影 离开 文字 
的 纵向 距离 , 第 三 个 参数 是 指 阴 影 的 模糊 半径 , 最 后 一 个 参数 是 指 阴 影 的 颜色 。 例如 下 面 这 段 代码 : 


<!gdoctype html> 
<html> 
<head> 
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<meta charset="utf-8"> 

<title> 为 文本 添加 阴影 </title> 

<style> 

Pi 
text-shadow:5px 5px Spx #BF2A2C; 
color:#1C5DCO; 
font-size:50px; 
font-weight:bold; 

} 

</style> 

</head> 

<body> 

<p> 文 字 阴影 效果 </p> 

</body> 

</html> 


在 这 段 代码 中 ， 我 们 指定 阴影 的 横向 和 纵向 距离 为 3px， 阴 影 的 模糊 半径 为 Spx， 阴 影 的 颜色 
为 #BF2A2C， 文 字 的 前 景色 为 #1C5DC0， 并 指定 字号 为 50px， 粗 体 显示 ， 效 果 如 下 图 所 示 。 


文学 天 影 效果 


当 页 面 的 背景 与 文字 很 难 区 分 时 ， 可 以 为 文字 添加 阴影 ， 这 样 就 能 很 方便 地 区 分 背景 与 文 
字 了 。 


20.3.2 位移 距离 


在 创建 文字 阴影 时 ，text-shadow 属性 的 前 两 个 length 值 用 于 控制 文字 阴影 的 位 移 距 离 。 第 一 
个 length 为 正 值 表示 向 右 位 移 ， 为 负 值 表示 向 左 位 移 ; 第 二 个 length 为 正 值 表示 向 下 位 移 ， 为 负 值 
表示 向 上 位 移 。 例 如 下 面 这 段 代 码 ， 演 示 了 length 为 负 值 时 阴影 的 效果 。 
Pi 
text-shadow:-5px -5px 5pX #BF2A2C; 
color:#1C5DCO; 
font-size:50px; 
font-weight:bold; 
} 


运行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 
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文字 阴影 效果 


20.3.3 ”阴影 的 模糊 半径 


text-shadow 属性 的 第 三 个 length 值 用 于 指定 文字 阴影 的 模糊 半径 ， 这 个 值 是 可 选 参数 ， 如 果 
省 略 ， 则 默认 为 0。 阴 影 半 径 越 大 ,模糊 的 范围 就 越 大 。 例 如 左下 图 是 省 略 模糊 半径 后 阴影 的 效果 ， 
右 下 图 是 模糊 半径 为 30px 的 阴影 效果 。 相 关 代码 如 下 : 


text-shadow: 5px Spx #BF2A2C; 
text-shadow:5px S5px 20px #BF2A2C; 


20.3.4 ”阴影 的 颜色 


text-shadow 属性 中 的 第 4 个 参数 color 用 于 指定 阴影 文字 的 颜色 ， 这 个 值 也 是 一 个 选择 参数 ， 
如 果 省 略 ， 就 使 用 文字 的 颜色 作为 阴影 的 颜色 。 省 略 文字 颜色 后 阴影 的 相关 代码 如 下 : 


text-shadow:5px Spx 20px ; 
运行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 


€ SC Dlocalhost/18/18.3.1html QFE 


文字 阴影 效果 
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20.3.5 ”指定 多 个 阴影 


使 用 text-shadow 属性 还 可 以 制作 多 个 阴影 的 文字 效果 ， 并 且 为 每 个 阴影 设置 不 同 的 参数 ， 多 
组 参数 中 用 逗号 隔 开 。 例 如 下 面 这 段 代 码 ， 分 别 为 文字 设置 了 三 个 不 同 的 位 移 、 模 糊 半径 和 颜色 ， 
相关 代码 如 下 : 
text-shadow:5px Spx 2px #BF2A2C, 
lO0px 10px 2px #C820AD; 
20px 20px 3px #123AD5; 
bcolor:#1C5DC07 
font-size:50px; 
font-weight:bold; 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 


€ PC Dlocalhost/8/183.1html QD 


支 学 只 影 禾 典 


20.4 CSS3 中 让 文本 自动 换行 一 一 text-break 属性 


当 文 本 的 内 容 需 要 在 多 行 中 显示 时 ， 浏 览 器 会 根据 一 定 的 规则 将 文本 内 容 划分 为 多 行 ， 而 在 
CSS3 中 可 以 使 用 text-break 属性 指定 换行 的 处 理 方法 。 
20.4.1 依靠 浏览 器 让 文本 自动 换行 

浏览 器 具有 自动 换行 的 处 理 规则 ， 对 于 西方 文字 、 空 格 、 连 字符 、 汉 字 和 标点 符号 而 言 ， 浏 
览 器 都 遵循 以 下 规则 : 


(1) 如 果 浏 览 器 右 端 的 文本 是 西方 文字 ， 那 么 浏览 器 会 在 半角 空格 或 连 字符 时 自动 换行 ， 如 
果 是 完整 的 单词 ， 则 不 会 换行 ， 效 果 如 下 图 所 示 。 


© [BD localhost/18/18.41.html Q@ 可 | 三 


By this time I was tramping the streets again. The sight of a 
tailor-shop gave me a sharp longingl to shed my rags, and to 
clothe myself decently once more. Could I afford it? No: I had 
nothing in the world but a million pounds. So I forced myself to 
go on by. But soon I was drifting back again I asked if they had 
a misfit suit on their hands. The fellow I spoke2 to nodded his 
head towards another fellow, and gave me no answer. 
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(2) 如 果 浏览 器 右 端的 文字 是 汉字 ， 那 么 浏览 器 会 在 右 端 直接 换行 。 
(3) 如 果 浏 览 器 右 端 是 中 文 标点 符号 ， 那 么 浏览 器 会 缩小 字 间 距 ， 保 证 中 文 标 点 符号 在 浏览 
器 的 最 右 端 ， 效 果 如 下 图 所 示 。 


[SE x 
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初冬 的 阳光 充满 淡淡 的 暖 暖 味道 ， 行 走 在 陡 陌 红尘 里 ， 安 之 车 
素 的 你 如 一 绫 清风 ， 轻 轻 拂 过 我 的 眼前 ， 留 下 阵 阵 余 香 。 你 从 
繁华 中 线 笑 而 来 ， 我 掠 过 地 平 线 上 的 日 光 ， 才 看 清 你 的 脸颊 , 
吹 强 可 破 的 肤 质 光滑 ， 端 庄 温柔 ， 腰 间 一 汽 千 里 的 秀 发 随 风 费 
肝 扬 扬 。 我 轻 如 浮云 ， 淡 如 静水 ， 冷 似 冰山 ， 近 我 者 ， 皆 免 不 
了 通体 鳞 伤 ， 而 你 却 不 以 为 然 。 


20.4.2 ”指定 自动 换行 的 处 理 方法 


在 CSS3 中 还 可 以 使 用 word-break 属性 指定 自动 换行 的 处 理 方法 。 它 的 属性 值 有 3 个 , 分 别 为 
normal (使 用 浏览 器 默认 的 换行 规则 ) 、keep-all (只 能 在 半角 空格 或 连 字符 处 换行 ) 和 break-all 
(允许 在 单词 内 换行 )。 前 面 我 们 已 经 介绍 了 normal 情况 下 换行 的 处 理 方法 ， 下 面 主要 介绍 另外 
两 种 自动 换行 的 处 理 方法 。 
如 果 是 西方 文本 ， 那 么 keep-all 不 允许 在 单词 内 换行 ， 而 break-all 则 允许 在 单词 内 换行 。 例 如 
下 面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 文 本 自动 换行 </title> 

<style> 

.keep all{ 

word-break: keep-all; 
} 
-break all{ 
word-break:break-all; 

} 

</style> 

</head> 

<body> 

<div class="keep_ all">Now and then I have tested my seeing friends to discover 
what they see. </div> 

<div class="break all">Now and then I have tested my seeing friends to discover 
what they see. </div> 

</body> 

</html> 


内 容 完全 相同 的 两 段 文 本 ,由 于 第 二 行文 本 使 用 了 break-all 样式 , 所 以 可 以 在 单词 “discover” 
中 换行 ， 效 果 如 下 图 所 示 。 
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DD localhost/18/18.4.1.html CE 


Now and then I have tested my seeing friends to 
discover what they see. 

Now and then I have tested my seeing friends to disco 
ver what they see. 


如 果 是 中 文 汉字 , 那么 使 用 keep-all 样式 的 文本 允许 在 标点 符号 处 换行 ,而 使 用 break-all 样式 
的 文本 则 不 能 在 标点 符号 处 换行 。 例 如 下 面 这 段 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 文 本 自动 换行 </title> 

<style> 

-keep all{ 

word-break: keep-all; 
} 
-break all{ 
word-break:break-all; 

} 

</style> 

</head> 

<body> 

<div class="keep_al1"> 初 冬 的 阳光 充满 淡淡 的 暖 暖 味道 ， 行 走 在 陡 陌 红尘 里 ， 安 之 若 素 的 你 如 
一 缕 清 风 ， 轻 轻 拂 过 我 的 眼前 ， 留 下 阵 阵 余 香 。</div> 

<div class="break_all"> 初 冬 的 阳光 充满 淡淡 的 暖 暖 味道 ， 行 走 在 陡 陌 红尘 里 ， 安 之 若 素 的 你 
如 一 缕 清 风 ， 轻 轻 拂 过 我 的 眼前 ， 留 下 阵 阵 余 香 。</div> 

</body> 

</html> 


因为 第 二 段 文字 使 用 了 break-all 样式 ， 所 以 在 标点 符号 是 右边 最 后 一 个 字符 时 并 没有 换行 ， 
而 是 连带 前 面 的 “ 风 ” 字 一 同 换行 ， 效 果 如 下 图 所 示 。 


3 © |D localhost/18/18.4.1.html Q 导 育 甸 
全 的 累 丰 法 这 六 的 咯 可 于 这 行走 在 际 陌 红尘 哩 ， 安 之 若 素 的 你 如 一 缕 清 风 ， 


轻 挤 过 我 的 眼前 ， 
切 冬 的 阳光 大 注 法 : a 入 赴 在 也 卫 红 小 里， 安之 若 素 的 你 如 一 缕 清 
， 轻 轻 指 过 我 的 眼前 ， 留 下 阵 阵 余 香 
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测试 题 


(1) 文本 的 颜色 有 几 种 赋值 方式 ? 

(2) 通常 我 们 使 用 的 斜体 文字 使 用 了 哪 种 倾斜 样式 ? 
(3) 如 何 显示 一 段 删除 的 文字 ? 

(4) 如 何 制作 首 字 下 沉 效 果 ? 

(5) 如 何 为 文本 添加 阴影 ? 


20.5 ”本 章 小 结 


本 章 主要 介绍 了 如 何 使 用 CSS 设置 文本 样式 ， 通 过 本 章 的 学 习 ， 读 者 应 该 熟练 掌握 控制 文本 
样式 的 方法 ， 以 及 控制 段落 样式 的 方法 ， 能 够 为 文本 添加 阴影 效果 ， 以 及 了 解 CSS3 中 文本 换行 的 
一 些 规则 。 


使 用 CSS 设置 图 片 与 背景 样式 


本 章 主 要 介绍 CSS3 中 图 片 与 背景 相关 的 样式 ， 其 中 包括 图 片 样式 、 图 片 对 齐 、 图 文 混 排 、 背 
景 颜 色 和 背景 图 片 。 在 网 页 中 正确 使 用 图 片 ， 不 仅 可 以 增加 网 页 的 美观 效果 ， 而 且 还 可 以 减少 网 页 


大 小 ， 提 升 页 面体 验 。 


21.1 图 片 样式 


在 HTML 页 面 中 ， 可 以 通过 <img> 元 素 插入 图 片 。 由 于 图 片 资 源 的 限制 ， 所 以 插入 图 片 需要 


对 其 边框 、 位 置 和 大 小 进行 设置 ， 才 能 展示 出 更 加 美观 的 效果 。 


21.1.1 图 片 边框 设置 


在 HTML 页 面 中 ， 可 以 通过 <img> 元 素 插入 一 张 图 片 ， 但 是 如 果 要 将 图 片 作为 元 素 的 边框 使 


用 就 比较 麻烦 ， 而 在 CSS3 中 可 以 直接 使 用 border-image 属性 ， 为 元 素 指定 一 个 
border-image 属性 的 使 用 方法 如 下 : 
border-image: url (图 片 路 径 ) A B C D/ 边 框 宽度 R1 R2 


图 片 边框 。 


其 中 A、B、C、D 分 别 用 于 设置 裁剪 图 片 的 位 置 ，R1 和 R2 分 别 用 于 设置 裁剪 图 
垂直 重复 方式 。 例 如 下 面 这 段 代 码 : 
<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 
<title> 图 片 样式 </title> 
<style> 


片 的 水 平和 
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div { 
width: 200px; 
border: 20px solid; 
border-image: url(002.png) 30 30 30 30 repeat stretch; 
-moz-border-image: url(002.png) 30 30 30 30 repeat stretch; 
-webkit-border-image: url(002.png) 30 30 30 30 repeat stretch; 
padding: 30px; 
text-align: center; 

} 

</style> 

</head> 

<body> 

<div> 图 片 边框 效果 </div> 

</body> 

</html> 


在 这 段 代码 中 ， 我 们 用 左边 的 图 片 为 <div> 元 素 设置 边框 ， 效 果 如 右 图 所 示 。 


border-image 属性 的 参数 可 以 有 很 多 ， 下 面 进行 详细 介绍 。 
(1) url 地 址 : 图片 的 url 地 址 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 ， 还 可 以 不 使 用 ， 即 设置 


为 none。 

(2) 裁剪 位 置 : 该 参数 比较 特殊 ， 不 需要 指定 具体 的 单位 ， 专 指 像素 ， 还 可 以 是 百分比 。 可 
以 统一 指定 一 个 值 ， 也 可 以 分 别 指定 4 个 值 。 

为 了 更 好 地 理解 裁剪 位 置 参数 ， 先 来 仔细 观察 上 面 的 图 片 ， 该 图 片 的 大 小 为 30pxX30px， 在 
横向 和 纵向 被 4 条 直线 分 割 成 9 个 小 方 框 , 为 了 突出 显示 效果 , 在 每 个 小 方 框 中 都 放置 了 一 个 更 小 
的 方 框 。4 个 角 上 的 蓝 色 小 方 框 ， 分 别 对 应 元 素 边 框 的 4 个 角 ， 上 、 下 、 左 、 右 4 个 黄色 小 方 框 ， 
分 别 对 应 元 素 的 上 、 下 、 左 、 右 边框 ， 中 间 的 橙色 小 方 框 受 到 全 部 参数 的 影响 ， 对 应 填充 边框 的 中 
间 区 域 。border-image 属性 根据 设置 的 裁剪 位 置 分 别 对 图 片 中 的 小 方 框 进行 裁剪 ， 然 后 将 裁剪 的 图 
片 作为 元 素 边框 对 应 位 置 的 背景 图 片 。 如 果 参 数 是 4 个 ， 则 遵循 上 右 下 左 顺 时 针 方 向 进行 裁剪。 


CY 中 间 填 充 效果 部 分 浏览 器 不 支持 中 间 填 充 效果 。 
提 示 


(3) 边框 宽度 : 该 参数 用 于 指定 边框 的 宽度 。 
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(4) 四 


复方 式 : 该 参数 


于 设置 裁剪 后 的 图 片 应 该 以 哪 种 重复 方式 为 边框 填充 背景 ， 可 选 的 


值 有 三 个 ， 分 别 为 repeat (重复 ) 、round ( 平 铺 ) 和 stretch ( 拉 伸 ) 。round 效果 如 下 面 左 图 所 示 ， 
stretch 效果 如 下 面 右 图 所 示 。 


21.1.2 ”设置 图 片 位 置 


HTML 页 面 中 的 图 片 还 可 以 通过 CSS 的 background-position 属性 设置 其 在 元 素 中 的 位 置 。 例 
如 下 面 这 段 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 图 片 样式 </title> 
<style> 


div { 


width:600px; 
height:260px; 
border:5px dotted #DC6E23; 
background-image:url (001 .png); 
background-repeat:no-repeat; 
background-position:0px Opx; 


1 


</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


在 这 段 代码 中 ， 为 了 显示 图 片 位 置 效 果 ， 我 们 为 元 素 设置 了 边框 ， 并 设置 background-repeat 


属性 为 no-repeat， 效 果 如 下 图 所 示 。 
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background-position 属性 值 有 两 个 : 第 一 个 用 于 设置 水 平 位 置 ， 第 二 个 用 于 设置 垂直 位 置 ， 可 
以 是 像素 为 单位 的 数字 ， 也 可 以 是 百分比 ， 还 可 以 是 CSS 规定 的 字符 串 。 详 细 说 明 如 下 表 所 示 。 


参数 值 


描 述 


top left 

top center 

top right 
center left 
center center 
center right 
bottom left 
bottom center 
bottom right 


css 中 规定 的 字符 串 ， 如 果 只 设置 一 个 关键 字 ， 那 么 第 二 个 值 将 是 “center” 


X% y% 


Xpos ypos 


百分比 ， 第 一 个 值 是 水 平 位 置 ， 第 二 个 值 是 垂直 位 置 。 左 上 角 是 0% 0%， 右 下 角 是 100% 
100%， 如 果 只 设置 了 一 个 值 ， 那 么 第 二 个 值 将 是 50% 

数值 ， 第 一 个 值 是 水 平 位置 ， 第 二 个 值 是 垂直 位 置 。 单 位 可 以 是 像素 或 任何 其 他 的 CSS 单 
位 ， 如 果 只 设置 了 一 个 值 ， 那 么 另 一 值 将 是 50%。 可 以 混合 使 用 百分比 和 数值 


21.1.3 ”设置 图 片 缩放 


在 页 面 中 插入 图 片 时 ， 为 了 显示 特殊 的 效果 ， 需 要 对 图 片 的 尺寸 进行 修改 ， 而 在 CSS3 中 可 以 
直接 通过 background-size 属性 来 控制 图 片 的 缩放 。 例 如 下 面 这 段 代码 : 
<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 
<title> 图 片 样式 </title> 


<style> 


div { 


width:300px; 

height:200px; 

border:1lpx solid #222; 
background:#4664B5; 
background-image:url (001 .png); 
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background-repeat :no-repeat; 
background-position:center center; 
background-size:contain; 

} 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


在 这 段 代码 中 ，<div> 元 素 的 宽度 为 300px， 高 度 为 200px， 并 设置 了 边框 和 背景 色 。 页 面 中 
只 显示 一 张 图 片 ， 并 让 其 显示 在 中 间 位 置 ， 将 background-size 属性 设置 为 contain， 表 示 等 比例 缩 
放 图 片 ， 效 果 如 下 图 所 示 。 


加 Bt 
De ] localhost/19/19.1ihtml 。 愉 导 去 | 去 


background-size 的 属性 值 可 以 是 数值 、 百 分 比 、cover 和 contain。 如 果 是 数值 或 百分比 ， 那 么 
第 一 个 值 用 于 设置 图 片 的 宽度 ， 第 二 个 值 用 于 设置 图 片 的 高 度 ; 如 果 只 设置 一 个 值 ， 那 么 第 二 个 值 
为 auto。cover 和 contain 为 CSS 中 规定 的 值 ，cover 效果 是 图 片 完全 覆盖 背景 区 域 ， 此 时 图 片 的 部 
分 区 域 或 许 无 法 显示 在 元 素 中 ， 而 contain 效果 是 图 片 完 全 适应 内 容 区 域 。 例 如 本 例 中 如 果 将 元 素 


的 尺寸 修改 为 宽度 200px， 高 度 300px， 则 效果 如 下 面 左 图 所 示 ; 如 果 设 置 background-size: cover， 
效果 如 下 面 右 图 所 示 。 


€ © |D localhost/19/19.1.1.html 
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21.1.4 实例 : 图 片 边框 按钮 
本 例 使 用 下 面 左 图 所 示 的 图 片 ， 制 作 一 个 圆 角 边框 按钮 效果 ， 完 成 后 的 效果 如 下 面 右 图 所 示 。 


C [Blocalhost/19/19.1.1.html 。 乌 名 支 三 


ED 


我 们 使 用 的 素材 图 片 是 一 个 圆 角 长 方形 ， 背 景 颜 色 为 灰色 ， 大 小 为 33pxX50px。 为 了 设置 圆 
角 效果 ,我 们 需要 使 用 border-image 属性 的 裁剪 功能 ， 对 圆 角 长 方形 的 4 个 圆 角 进行 裁 前 ， 将 裁剪 
后 的 图 片 应 用 到 按钮 边框 的 4 个 角 ， 并 让 其 他 裁剪 图 形 拉 伸 显示 。 为 了 得 到 显示 效果 ,还 需要 设置 
按钮 的 边框 为 13px， 这 样 就 完成 了 圆 角 按钮 的 效果 。 完 整 的 代码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 图 片 边框 按钮 </title> 
<style> 
div { 
text-align: center; 
} 
#bt{ 
width: 120px; 
height:40px; 
border:13px solid; 
border-image: url(003.png) 13 13 13 13 stretch; 
-moz-border-image: url(003.png) 13 13 13 13 stretch; 
-webkit-border-image: url(003.png) 13 13 13 13 stretch; 
} 
</style> 
</head> 
<body> 
<div> 
<button id="bt"” value=""> 确 定 </button> 
</div> 
</body> 
</html> 
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21.2 图 片 对 齐 


HIML 页 面 中 除了 图 片 还 有 许多 其 他 的 元 素 ， 为 了 让 图 片 与 这 些 元 素 呈现 更 好 的 效果 ， 就 需 
要 设置 图 片 的 对 齐 方式 。 在 CSS3 中 可 以 设置 图 片 水 平 对 齐 方式 ， 也 可 以 设置 图 片 垂直 对 齐 方式 。 


21.2.1 水 平 对 齐 设置 


图 片 水 平 对 齐 主要 是 通过 text-align 属性 进行 设置 ， 在 前 面 章节 中 我 们 已 经 介绍 了 如 何 使 用 这 
个 属性 设置 段落 对 齐 方 式 , 该 属性 同样 适用 于 图 片 对 齐 。 这 里 将 不 再 袭 述 该 属性 的 使 用 方法 ， 只 给 
出 各 种 对 齐 方式 对 于 图 片 的 影响 效果 ， 如 下 图 所 示 。 


1eft 对 齐 效果 


justify 对 齐 效果 


start 对 齐 效果 


21.2.2 ”垂直 对 齐 设置 


图 片 垂直 对 齐 主要 是 通过 vertical-align 属性 进行 设置 , 在 前 面 章 节 中 我 们 已 经 介绍 了 如 何 使 用 
这 个 属性 设置 段落 对 齐 方式 , 该 属性 同样 适用 于 图 片 对 齐 。 这 里 将 不 再 著述 该 属性 的 使 用 方法 ， 只 
给 出 各 种 对 齐 方 式 对 于 图 片 的 影响 效果 ， 如 下 图 所 示 。 
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21.2.3 实例: 排列 的 相册 


本 例 将 在 页 面 中 显示 多 张 图 片 ， 并 让 其 在 水 平和 垂直 方向 居中 对 齐 。 由 于 图 片 原始 尺寸 各 不 
相同 ， 所 以 在 排列 图 片 时 需要 将 所 有 图 片 的 尺寸 设置 成 相同 的 大 小 ， 然 后 将 其 父 容器 的 text-align 
属性 设置 为 center，vertical-align 属性 设置 为 middle。 按 照 我 们 的 想法 有 了 如 下 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 排 列 相 册 </title> 
<style> 
i 
width: 200px; 
height: 200px; 
float: left; 
border: solid lpx #575757; 
margin: 10px 1l0px 0 07 
list-style: none; 
text-align:center; 
vertical-align:middle; 


} 

img { 
width:50%7 
height:50%; 
border:lpx solid #B1B1B17 

} 

</style> 

</head> 

<body> 

<ul> 
<1i><img src="photo01.jpg" alt="" /></1i> 
<li><img src="photo02.jpg" alt="" /></1i> 
<li><img src="photo03.jpg" alt="" /></1i> 
<li><img src="photo04.jpg" alt="" /></1i> 
<li><img src="photo05.jpg" alt="" /></l1i> 

</ul> 

</body> 

</html> 


运行 这 段 代 码 后 ， 发 现 并 没有 得 到 我 们 想 要 的 效果 ， 如 下 图 所 示 。 
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虽然 图 片 在 水 平方 向 居中 对 齐 了 ， 但 是 垂直 方向 并 没有 居中 对 齐 ， 这 是 为 什么 呢 ? 因为 我 们 
设置 了 float 属性 ， 改 变 了 元 素 的 浮动 方式 ， 元 素 的 display 属性 会 被 忽略 ， 所 以 垂直 方向 就 无 法 居 
中 了 。 在 实际 项 目 中 这 种 问题 很 常见 ， 而 应 对 的 方法 也 有 很 多 ， 下 面 我 们 介绍 一 种 行 之 有 效 的 处 理 
方法 。 

首先 在 每 个 <img> 元 素 的 前 面 添加 一 个 <span> 元 素 ， 并 设置 display 属性 为 inline-block， 将 行 
内 元 素 改变 为 行内 块 元 素 ， 然 后 设置 <span> 元 素 宽度 为 1px， 高 度 为 100%， 并 设置 垂直 居中 对 章 。 
除 此 之 外 ， 还 需要 给 <img> 元 素 添 加 垂直 居中 样式 。 相 关 代码 如 下 : 


span { 
display: inline-block; 
width: lpx; 


height: 100%; 
vertical-align: middle; 

} 

img { 
width:50%7 
height:50%; 
border:lpx solid #B1B1B17 
vertical-align: middle; 


有 
再 次 刷新 页 面 后 ， 所 有 的 图 片 都 居中 显示 了 ， 效 果 如 下 图 所 示 。 


21.3 ”图 文 混 排 


图 文 混 排 是 网 页 中 使 用 非常 广泛 的 一 种 效果 ， 如 何 让 图 片 和 文字 按照 设计 的 要 求 以 合适 的 方 
式 展现 在 页 面 上 ， 是 本 节 将 要 讨论 的 主要 内 容 。 
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21.3.1 设置 图 文 混 排 


在 CSS 中 有 一 个 float 属性 ， 该 属性 可 用 于 设置 元 素 的 浮动 ， 浮 动 后 的 元 素 就 成 为 块 元 素 ， 它 
会 影响 到 周围 元 素 的 显示 效果 。 为 了 实现 图 文 混 排 效果 ,我 们 可 以 借助 这 个 属性 设置 图 片 浮动 ,这 
样 文字 就 可 以 围绕 图 片 显 示 了 。 例 如 下 面 这 段 代 码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 图 文 混 排 </title> 

<style> 


#items{ 
width:600px; 
border:lpx solid #555; 
margin:10px; 

} 

img{ 
float:left; 
padding:10px; 

} 

#items hl{ 
background:#E93A2E; 
color:white; 
margin:20px 10px 0 130px; 
padding-left:20px; 


pt{ 
text-indent:2em; 
font-size:20px; 
padding:10px; 
} 
#items div .link{ 
text-align:right; 
} 
</style> 
</head> 
<body> 
<div id="items"> 
<img src="logo.png" /> 
<div> 
<hl>CSS3</h1> 
<p>CSS 即 层 登 样式 表 (Cascading Stylesheet) 。 在 网 页 制作 时 采用 层叠 样 式 表 
技术 ， 可 以 实现 对 页 面 的 布局 、 字 体 、 颜 色 、 背 景 及 其 他 效果 的 精确 控制 。 只 要 对 相应 的 代码 做 一 些 简单 的 
修改 ， 就 可 以 改变 同一 页 面 的 不 同 部 分 ， 或 者 页 数 不 同 的 网 页 的 外 观 和 格式 。</P> 
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<p class="link"><a href="#">detail</a></p> 
</div> 
</div> 
</body> 
</html> 


在 这 段 代 码 中 ，<img> 元 素 用 于 插入 图 片 ，<p> 元 素 用 于 引入 文本 ， 两 者 同属 于 <div> 元 素 的 子 
元 素 。 首 先 为 了 实现 让 文字 环绕 图 片 的 效果 ， 需 要 设置 <img> 元 素 的 float 属性 ， 并 设置 一 定 的 内 边 
距 。 在 段落 样式 中 , 我 们 使 用 了 text-indent 属性 , 该 属性 用 于 设置 段落 首 行 缩 进 , 效果 如 下 图 所 示 。 


EE 下 


所 了 GDioclhosuian1931 


getail 


21.3.2 ”设置 混 排 间距 


在 上 例 中 我 们 实现 了 图 文 混 排 效 果 ， 但 是 文章 的 段落 看 起 来 很 紧凑 ， 并 不 利于 阅读 ， 这 时 可 
以 使 用 前 面 章节 中 介绍 的 设置 行 间距 和 字 间 距 的 方法 , 为 图 文 混 排 中 的 段落 设置 样式 。 例如 为 上 例 
中 的 段落 添加 如 下 样式 : 
p{ 
text-indent:2em; 
line-height:1.5; 
font-size:20px; 
padding:10px; 
} 


刷新 页 面 后 的 效果 如 下 图 所 示 。 


detail 
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21.3.3 ”实例 : 看 图 说 话 


本 例 将 制作 一 个 看 图 说 话 的 页 面 。 页 面 中 有 4 张 图 片 ， 每 张 图 片 前 面 都 有 一 个 编号 ， 图 片上 
面 有 一 段 文 字 ， 使 用 float 属性 设置 图 文 混 排 效果 。 完 整 的 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 看 图 说 话 </title> 
<style> 
div{ 
margin:0px; 
padding:0px; 


Color:#E15A2E; 


text-indent:2em; 
font-size:18px; 
font-weight:bold; 
line-height:20px; 
letter-spacing:2px; 
} 
1if{ 
list-style:none; 
float:left; 
margin:10px; 
下 
Bf{ 
float:left; 
display:inline; 
ly 
</style> 
</head> 
<body> 
<div> 
<h1> 看 图 说 话 </h1l> 
<p> 小 朋友 ， 看 看 下 面 几 张 图 片 ， 你 知道 这 些小 朋友 都 是 哪个 民族 的 吗 ? 它们 正在 干什么 呢 ? 把 你 看 
到 的 说 给 爸爸 妈妈 听 吧 ! </p> 
<div> 
<ul> 
<li><p> 图 1</p><img src="ktsh01.bmp"/></1i> 
<1i><p> 图 2</p><img src="ktsh02.bmp"/></1i> 
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<li><p> 图 3</p><img src="ktsh03.bmp"/></1i> 
<li><p> 图 4</p><img src="ktsh04.bmp"/></1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


在 这 段 代码 中 , 所 有 的 图 片 都 放 在 <li> 元 素 中 , 为 了 让 列表 横向 排列 显示 , 设置 <li> 元 素 的 float 
属性 为 left， 让 其 向 左 浮 动 。 在 每 一 个 <li> 元 素 中 都 有 一 个 <p> 元 素 和 一 个 <img> 元 素 ， 为 了 让 这 两 
个 元 素 混 排 在 一 起 ， 设 置 <p> 元 素 的 float 属性 为 left， 这 样 就 完成 了 看 图 说 话 的 效果 , 如 下 图 所 示 。 


ans x 
€ 3 CB localhost19/1931.htn 


看 图 说 话 


小 朋友 ， 看 看 上 面 儿 幅 图 ， 你 知道 这 些小 胃 友 部 是 哪个 民族 的 吗 ? 他 
们 正在 干什么 嘱 ? 把 你 看 到 的 说 给 区 区 妈妈 听 吧 ! 


21.4 背景 颜色 


合理 规划 页 面 的 背景 颜色 ， 有 助 于 提升 页 面 的 整体 效果 。 在 HIML 中 ， 可 以 使 用 CSS 为 整个 
页 面 设置 统一 的 背景 颜色 ， 还 可 以 为 某 些 元 素 设置 特殊 的 背景 颜色 。 


21.4.1 设置 页 面 背景 颜色 


在 CSS 中 ， 可 以 使 用 background-color 属性 为 页 面 设置 背景 颜色 ， 这 个 属性 的 值 可 以 是 CSS 
中 规定 的 颜色 名 称 〈 如 red) 、 十 六 进 制 的 背景 颜色 〈 如 #A37C7C) 或 rgb 代码 的 背景 颜色 (如 rgb 
(255,0,0) ) ， 以 及 transparent。 

transparent 是 页 面 默认 的 背景 色 ， 该 背景 色 为 透明 ， 在 大 多 数 情况 下 ， 没 有 必要 使 用 该 值 。 如 
果 不 希 望 某 元 素 拥 有 背景 色 , 同时 又 不 希望 用 户 对 浏览 器 的 颜色 设置 影响 了 设计 , 那么 此 时 就 可 以 
使 用 transparent 值 。 

页 面 中 的 所 有 元 素 都 是 <html> 元 素 的 子 元 素 ， 根 据 CSS 的 继承 特性 ， 只 要 为 <html> 元 素 设置 
了 背景 色 ， 就 等 于 给 整个 页 面 设置 了 背景 色 。 相 关 代码 如 下 : 
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html{ 
background-color:#C7D3AD; 
} 


另外 ， 由 于 <body> 元 素 是 整个 页 面 内 容 的 父 元 素 ， 所 以 通常 情况 下 ， 要 设置 页 面 的 背景 色 ， 
直接 设置 <body> 元 素 的 背景 色 即 可 。 


21.4.2 设置 块 背景 颜色 


<div> 元 素 是 用 来 为 HTML 文档 内 大 块 的 内 容 提 供 结构 和 背景 的 。div 起 始 标签 和 结束 标签 之 
间 的 所 有 内 容 都 是 用 来 构成 整个 块 的 ， 其 中 包含 元 素 的 特性 ， 都 由 <div> 元 素 的 属性 来 控制 ， 或 者 
通过 使 用 样式 格式 化 这 个 块 来 控制 。 

作为 一 个 可 以 容纳 其 他 元 素 的 容器 ， 当 为 <div> 元 素 设置 了 背景 色 后 ， 块 内 其 他 元 素 也 就 具有 
了 相同 的 背景 色 ， 这 是 由 CSS 的 继承 特性 决定 的 。 如 果 不 想 让 <div> 内 的 元 素 和 <div> 拥 有 相同 的 颜 
色 ， 就 可 以 为 内 容 元 素 重新 设置 背景 色 。 同 样 ， 可 以 通过 background-color 属性 为 块 设置 背景 颜色 。 


21.5 ”背景 图 片 


背景 (background) 是 CSS 中 一 个 非常 重要 的 部 分 ,如何 为 背景 设置 合适 的 背景 图 片 ， 是 Web 
程序 员 必须 掌握 的 一 项 技能 。background 的 属性 有 很 多 种 ， 本 节 将 主要 介绍 这 些 属 性 的 使 用 方法 。 


21.5.1 设置 页 面 背景 图 片 
通过 background-image 属性 可 以 为 页 面 设置 背景 图 片 ， 它 的 值 是 背景 图 片 的 url 地 址 。 如 果 图 
片 和 页 面 在 同 级 目录 下 ， 就 可 以 直接 使 用 图 片 名 称 。 例 如 下 面 的 代码 : 
background-image:url(001.png) 7 
如 果 图 片 和 页 面 不 在 同一 级 目录 下 ， 而 是 在 与 页 面 同 级 的 一 个 名 为 image 的 文件 夹 中 ， 此 时 
就 需 更 改 图 片 路 径 。 例 如 下 面 的 代码 : 
background-image:url (image/001.png); 
如 果 图 片 在 页 面 的 上 级 目录 中 ， 此 时 就 需要 使 用 “../” 指 定 上 一 级 目录 。 例 如 下 面 的 代码 : 
background-image:url(../image/001.png); 


21.5.2 ”重复 的 背景 图 片 


默认 情况 下 ， 如 果 作 为 背景 的 图 片 尺寸 小 于 浏览 器 窗口 的 尺寸 ， 浏 览 器 会 自动 在 水 平和 垂直 
方向 上 重复 显示 背景 图 片 。 如 果 不 希 望 重新 显示 背景 图 片 , 就 可 以 使 用 background-repeat 属性 控制 
背景 图 片 的 显示 方式 。 这 个 属性 的 值 有 以 下 几 种 : 

background-repeat: repeat; 


background-repeat: no-repeat; 
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background-repeat: repeat-x; 
background-repeat: repeat-y; 
background-repeat: space; 
background-repeat: round; 


repeat 是 默认 的 方式 ， 表示 图 片 将 在 水 平和 垂直 方向 上 重复 显示 ; no-repeat 表示 背景 图 像 只 显 
示 一 次 ; repeat-x 表示 只 在 水 平方 向 上 重复 背景 图 片 ，repeat-y 表示 只 在 垂直 方向 上 重复 背景 图 片 ; 
space 表示 应 用 同等 数量 的 空白 到 图 片 之 间 ， 直 到 填 满 整个 元 素 ， 这 是 CSS3 中 的 新 增值 ; round 表 
示 缩 小 图 片 直到 正好 平 铺 满 元 素 ， 这 也 是 CSS3 中 的 新 增值 。 下 面 左 图 是 space 的 效果 ， 下 面 右 图 
是 round 的 效果 。 


21.5.3 ”设置 背景 图 片 的 位 置 


通过 background-position 属性 可 以 设置 背景 图 片 的 位 置 , 在 前 面 章 节 中 我 们 已 经 介绍 过 这 个 属 
性 的 使 用 方法 ， 这 里 就 不 再 效 述 。 


21.5.4 设置 背景 滚动 


通过 设置 background-attachment 属性 ， 可 以 控制 背景 图 片 的 滚动 方式 。 这 个 属性 的 值 有 以 下 
几 种 : 
background-attachment :fixed7 


background-attachment: scroll; 
background-attachment: local; 


fixed 表示 当 页 面 的 其 余部 分 滚动 时 ,页 面 的 背景 图 片 不 会 滚动 ; scroll 表示 背景 图 片 会 随 着 页 
面 的 其 余部 分 滚动 而 移动 ，local 表示 背景 图 片 会 随 着 内 容 的 滚动 而 移动 。 


21.5.5 ”背景 样式 的 缩写 方式 
背景 样式 的 缩写 允许 使 用 background 声明 所 有 背景 属性 。 包 括 以 下 属性 : 


background-color 
background-position 
background-repeat 
background-attachment 


background-image 


354 | HTML5+CSS3+JavaScript 前 端 开发 基础 


例如 下 面 的 代码 ， 分 别 声明 了 背景 的 颜色 、 图 片 、 重 复方 式 、 滚 动 方式 和 位 置 。 
background:#00FF00 Url (001.png) no-repeat fixed top; 


21.5.6 ”实例 : 创建 背景 皮肤 


本 例 将 为 页 面 创建 不 同 的 背景 皮肤 ， 并 通过 单 击 页 面 上 的 按钮 实现 切换 背景 皮肤 的 功能 。 为 
实现 此 功能 ， 我 们 需要 先 创建 两 套 样 式 表 ， 分 别 为 bg_stylel.css 和 bg_style2.css， 并 在 这 两 个 样式 
表 中 分 别 设置 不 同 的 背景 样式 。 相 关 代 码 如 下 : 

body{ 

background-image:url (001.png); 
background-color:#C4E4DB; 
background-repeat :no-repeat; 
background-position:center; 


} 

body{ 
background-image:url (001 .png); 
background-color:#E4CBAC; 
background-repeat:space; 


} 
使 用 <link> 元 素 在 页 面 中 引入 创建 的 两 套 样式 表 。 相 关 代 码 如 下 : 


<link rel="stylesheet" type="text/css" title="bg stylel" 
href="bg_stylel.css"> 

<link rel="stylesheet" type="text/css" title="bg style2" 
href="bg_style2.css"> 


在 HTML 页 面 中 创建 两 个 按钮 ， 当 单 击 按钮 时 ， 调 用 JavaScript 函数 ， 将 当前 按钮 的 value 值 
作为 参数 ， 通 过 JavaScript 遍历 当前 页 面 的 <link> 元 素 ， 如 果 元 素 的 title 值 与 参数 值 相同 ， 则 启用 
该 样式 ， 否 则 禁用 该 样式 。 完 整 的 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 背 景 颜色 </title> 

<link rel="stylesheet" type="text/css" title="bg stylel™" 
href="bg_stylel.css"> 

<link rel="stylesheet" type="text/css" title="bg style2" 
href="bg_style2.css"> 

<script language="javascript"> 

function setstyle (btn){ 

var links; 
links=document .getElementsByTagName ("link"); 


for(var i=0;i<links.length;i++){ 
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if(links[i] .getAttribute("rel") .indexOf ("style") !=-1 &é& 
links[i] .getAttribute ("title")){ 


links[i].disabled=true; 

if(links[i] .getAttribute ("title") .indexOf (btn.value) !=-1){ 
links[i] .disabled=false; 

} 


} 
} 
</script> 
</head> 
<body> 
<button onClick="setSstyle (this)" value="bg_stylel"> 皮 肤 1</button> 
<button onClick="setStyle (this)" value="bg_style2"> 皮 肤 2</button> 
</body> 
</html> 


运行 这 段 代 码 后 ， 当 单 击 “ 皮 肤 1” 按 钮 时 ， 页 面 效果 如 下 面 左 图 所 示 ， 当 单 击 “ 皮 肤 2” 按 
钮 时 ， 页 面 效果 如 下 面 右 图 所 示 。 


测试 题 


(1) 在 CSS 中 如 何 设置 图 片 的 位 置 ? 
(2) 如 何 使 用 CSS 创建 图 文 混 排 效 果 ? 
(3) 如 何 让 页 面 背景 随 着 页 面 内 容 滚动 ? 
(4) 背景 样式 的 缩写 都 包含 哪些 属性 ? 
(5) 如 何 创建 页 面皮 肤 ? 


21.6 ”本 章 小 结 


本 章 主要 介绍 了 CSS 中 设置 图 片 与 背景 样式 的 方法 。 通 过 本 章 的 学 习 ， 读 者 应 该 熟练 掌握 图 
片 样式 的 设置 方法 、 图 片 对 齐 的 设置 方法 、 图 文 混 排 的 设置 方法 、 背 景 颜色 的 设置 方法 及 背景 图 片 
的 设置 方法 。 


使 用 CSS 设置 列表 与 表单 样式 


列表 和 表单 是 网 页 中 非常 重要 的 两 个 元 素 。 列 表 不 仅 可 以 用 于 显示 数据 ， 还 可 以 用 来 排版 ， 
而 表单 则 是 网 页 与 用 户 交互 的 窗口 , 是 信息 获取 与 反馈 的 重要 途径 。 本 章 将 主要 介绍 如 何 使 用 CSS 
设置 列表 与 表单 的 样式 。 


22.1 列表 控制 


早期 的 HIML 页 面 数据 展示 经 常会 使 用 表格 ， 而 随 着 HTML 和 CSS 技术 的 发 展 ， 越 来 越 多 
的 人 开始 使 用 列表 代替 表格 完成 这 项 工作 ， 不 仅 如 此 ， 列 表 还 可 以 用 来 完成 网 页 布局 的 相关 功能 ， 
如 菜单 栏 和 导航 条 等 。 本 节 将 详细 介绍 如 何 使 用 列表 的 这 些 功 能 。 


22.1.1 列表 的 类 型 及 使 用 


HIML 中 的 列表 可 分 为 三 类 ， 分 别 为 无 序列 表 、 有 序列 表 和 自 定义 列表 。 无 序列 表 是 一 个 项 
目的 列表 ， 此 列 项 目 使 用 粗 体 圆 点 进行 标记 。 在 HIML 中 ， 无 序列 表 使 用 <ul> 元 素 表 示 ， 列 表 中 
的 每 一 个 项 目 使 用 <li> 元 素 表 示 ， 列 表 项 内 部 可 以 是 段落 、 图 片 、 链 接 或 其 他 列表 等 元 素 。 例 如 下 
面 的 无 序列 表 : 

<ul> 

<1i> 无 序列 表 项 目 </1i> 
<1i> 无 序列 表 项 目 </1i> 


</ul> 
这 段 代 码 在 页 面 中 的 效果 如 下 面 左 图 所 示 。 


有 序列 表 与 无 序列 表 类 似 ， 但 是 有 序列 表 的 列表 项 目前 面 带 有 数字 标记 。 在 HIML 中 ， 有 序 
列表 用 <ol> 元 素 表示 ， 列 表 中 的 项 目 同样 用 <li> 元 素 表示 。 例 如 下 面 的 有 序列 表 : 
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<ol> 
<1i> 有 序列 表 项 目 </1i> 
<1i> 有 序列 表 项 目 </1i> 


</ol> 


这 段 代码 在 页 面 中 的 效果 如 下 面 右 图 所 示 。 
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。 无 序列 表 项 目 


* 无 序列 表 项 目 


自 定 义 列表 与 前 两 者 有 所 区 别 ， 它 不 仅仅 是 一 个 列表 项 目 ， 而 是 项 目 及 其 注释 的 组 合 。 在 
HTML 中 ， 自 定义 列表 用 <d 忆 元 素 表示 ， 列 表 项 目 用 <d> 元 素 表 示 ， 列表 注释 用 <dd> 元 素 表示 。 例 
如 下 面 的 自 定义 列表 : 

<dl> 

<dt> 自 定义 列表 </dt> 
<dd> 这 是 一 个 自 定义 列表 项 目 </dd> 
<dt> 自 定义 列表 </dt> 


<dq> 这 是 一 个 自 定义 列表 项 目 </dd> 
</dl> 


这 段 代码 在 页 面 中 的 效果 如 下 图 所 示 。 


NH 
“这 是 一 个 自 定义 列表 项 目 


列表 在 网 页 设计 中 发 挥 着 越 来 越 重 要 的 作用 ， 人 掌握 列表 的 基本 使 用 方法 ， 再 配合 CSS 样式 的 
灵活 运用 ， 就 能 制作 出 各 种 美观 实用 的 效果 。 


22.1.2 ”创建 垂直 导航 条 


垂直 导航 条 是 页 面 设计 中 经 常会 用 到 的 一 个 功能 ， 通 常 的 做 法 就 是 使 用 CSS 样式 控制 列表 的 
显示 ， 从 而 实现 垂直 导航 的 效果 。 例 如 下 面 这 段 代码 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 列 表 控制 </title> 
<style> 

ulf{ 
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list-style-type:none; 

} 

UE 
margin-bottom:2px; 
border:1lpx solid #B8B8B8; 
width:120px; 

} 

a:link,a:visited{ 
display:block; 
font-weight:bold; 
background-color:#D9D9D9; 
color:white; 
padding: 5px; 
text-align:center; 
text-decoration:none; 

} 

a:hover,a:active{ 
background-color:#F17022; 

} 

</style> 

</head> 

<body> 

<ul> 
<li><a href="#">Home</a></1i> 
<li><a href="#">Blog</a></1i> 
<li><a href="#">Portfolio</a></1i> 
<li><a href="#">CV</a></1i> 
<li><a href="#">Projects</a></1i> 
<li><a href="#">Contact Me</a></1i> 

</ul> 

</body> 

</html> 


在 这 段 代 码 中 ， 我 们 使 用 了 无 序列 表 来 创建 导航 条 ， 通 过 设置 无 序列 表 的 list-style-type 属性 


为 none， 清 除 列表 项 前 的 圆 点 标记 ， 此 操作 是 使 用 列表 创建 导航 条 的 关键 步骤 。 再 经 过 其 他 样式 
的 设计 ， 运 行 这 段 代 码 后 ， 垂 直 导航 条 的 效果 如 下 图 所 示 。 
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22.1.3 ”创建 水 平 导航 条 

使 用 列表 同样 也 可 以 制作 水 平 导 航 条 ,其 关键 步骤 除了 要 设置 list-style-type 属性 为 none 以 外 ， 
还 需要 设置 float 属性 ， 让 所 有 项 目 浮动 ， 浮 动 后 的 项 目 会 依次 排列 ， 这 样 就 形成 了 水 平 导 航 条 。 
例如 为 上 例 中 的 <1i> 元 素 添 加 以 下 代码 : 

float:left; 


再 次 刷新 页 面 后 ， 刚 才 还 是 垂直 的 导航 条 现在 已 经 变 成 了 水 平 导 航 条 ， 效 果 如 下 图 所 示 。 


[SE -| 
人 3 © Dlocalhos/20/201.1.htmie 


Howe 


浮动 后 的 项 目 会 受 其 父 级 元 素 宽度 的 影响 ， 如 果 父 级 元 素 宽度 小 于 浮动 后 所 有 元 素 宽度 总 和 ， 
浮动 的 项 目 就 会 换行 显示 。 为 了 确保 水 平 导航 条 的 所 有 项 目 都 在 一 行 中 显示 , 必须 设置 父 级 元 素 的 
宽度 。 


22.2 ”使 用 列表 制作 实用 菜单 


在 实际 项 目 中 ， 很 多 导航 条 菜单 都 会 多 级 显示 ， 使 用 嵌 套 列表 同样 可 以 制作 这 些 效 果 。 通 过 
CSS 样式 的 设置 ， 还 可 以 制作 多 种 多 样 的 导航 菜单 效果 。 


22.2.1 实例 : 多 级 列表 菜单 


列表 项 内 部 可 以 是 各 种 元 素 ， 包 括 使 用 列表 。 屋 套 的 列表 可 以 实现 多 级 菜单 的 效果 。 本 例 将 
制作 一 个 多 级 列表 菜单 ， 首 先 在 HIML 页 面 中 制作 嵌 套 的 列表 菜单 。 相 关 代码 如 下 : 

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 多 级 列表 菜单 </title> 
<style> 
</style> 
</head> 
<body> 
<uL id="menu"> 

<1i><a href="#">menu</a></1i> 

<li><a href="#">menu</a> 

<ul> 
<1i><a href="#">item</a></1i> 
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<li><a href="#">item</a></1i> 
<li><a href="#">item</a></1i> 
</ul> 
</1i> 
<li><a href="#">menu</a> 
<ul> 
<li><a href="#">item</a></1i> 
<li><a href="#">item</a></1i> 
<li><a href="#">item</a></1i> 
</ul> 
</1i> 
<1i><a href="#">menu</a> 
<ul> 
<li><a href="#">item</a></1i> 
<li><a href="#">item</a></1i> 
<li><a href="#">item</a></1i> 
</ul> 
</1i> 
<1i><a href="#">menu</a> 
<ul> 
<li><a href="#">item</a></1i> 
<li><a href="#">item</a></1i> 
<li><a href="#">item</a></1i> 
</ul> 
</1i> 
</uL> 
</body> 
</html> 


先 通 过 设置 列表 的 list-style-type 属性 清除 列表 的 圆 点 标记 ， 再 通过 设置 列表 项 的 float 属性 ， 
让 所 有 列表 项 目 浮动 。 相 关 代 码 如 下 : 
ulf{f 
list-style-type:none; 
} 
1i{ 
float:left; 
width:60px; 
} 
#menu 1if{ 
float:left; 
margin:1px; 


} 


刷新 页 面 后 ， 可 以 看 到 所 有 的 列表 项 目 都 已 经 展开 ， 多 级 列表 菜单 的 雏形 已 经 实现 ， 效 果 如 下 
图 所 示 。 
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但 是 这 并 不 是 我 们 想 要 的 效果 。 我 们 希望 当 鼠 标 悬 停 在 父 级 菜单 上 时 ， 对 应 的 子 菜单 显示 出 
来 ， 当 鼠标 离开 时 ， 子 菜单 自动 隐藏 。 为 了 实现 这 样 的 效果 ， 设 置 所 有 子 菜单 项 在 页 面 加 载 时 全 部 
隐藏 ， 当 鼠标 悬 停 在 父 菜单 上 时 再 显示 出 来 。 相 关 代码 如 下 : 
#menu 1i ulf{ 
display:none; 
} 
#menu li:hover ulf{ 
display:block; 
} 


刷新 页 面 后 ， 当 我 们 将 鼠标 悬 停 在 响应 菜单 上 时 ， 子 菜单 项 就 会 显示 出 来 ; 当 鼠 标 离开 菜单 
时 ， 子 菜单 就 会 隐藏 ， 效 果 如 下 图 所 示 。 


3 © |D localhost/20/20.2.1.html 


iiem 


现在 我 们 为 菜单 设置 一 些 背 景色 和 前 景色 ， 以 及 边框 等 样式 。 相 关 代 码 如 下 : 

1i{ 
float:left; 
width:60px; 
border:lpx solid #B8B8B8; 
text-align:center; 

1 

a:link,a:visited{ 
display:block; 
font-weight:bold; 
background-color:#D9D9D9; 
color:white; 
padding:S5px; 
text-align:center; 
text-decoration:none; 
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} 
a:hover,a:active{ 
background-color:#F17022; 


刷新 页 面 后 ， 当 我 们 把 鼠标 悬 停 在 菜单 上 时 ， 发 现 子 菜单 的 左边 出 现 了 边框 ， 这 并 不 是 我 们 
想 要 的 效果 ， 如 下 图 所 示 。 


出 现 这 种 情况 是 因为 浮动 后 的 元 素 都 是 块 级 元 素 ，<ul> 和 <li> 元 素 的 相对 位 置 发 生 了 变化 。 要 
解决 这 个 问题 ， 我 们 需要 在 隐藏 子 元 素 时 ， 设 置 其 位 置 为 相对 定位 ， 在 显示 子 元 素 时 ， 设 置 其 位 置 
为 绝对 定位 就 可 以 了 。 另 外 , 子 元 素 的 位 置 与 其 父 元 素 的 位 置 在 垂直 方向 上 并 没有 对 齐 ， 需 要 清除 
子 元 素 的 <ul> 元 素 内 间距 。 相 关 代码 如 下 : 

#menu 1if{ 

float:left; 
margin:1px; 
position:relative; 

3 

#menu 1i ulf{ 

display:none; 
margin:0; 
padding:2px 0; 

. 

#menu li:hover ulf{ 

display:block; 
position:absolute; 


} 
再 次 刷新 页 面 后 ， 一 个 二 级 菜单 的 效果 就 实现 了 ， 效 果 如 下 图 所 示 。 
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试 一 试 : 本 例 制作 的 是 一 个 二 级 菜单 效果 ， 有 兴趣 的 读者 还 可 以 尝试 制作 一 个 三 级 菜单 效果 。 
22.2.2 ”实例 : 会 伸缩 的 列表 菜单 


CSS 不 但 可 以 用 来 制作 多 级 列表 菜单 ， 而 且 还 可 以 制作 伸缩 列表 菜单 。 本 例 将 详细 介绍 如 何 
使 用 CSS 制作 会 伸缩 的 列表 菜单 。 首 先 在 HTML 页 面 中 制作 赃 套 的 列表 菜单 ， 相 关 代 码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 多 级 列表 菜单 </title> 
<style> 
</style> 
</head> 
<body> 
<ul id="menu"> 
<li><a href="#">menu</a></1i> 
<1i><a href="#">menu</a> 
<ul> 
<li><a href="#">item</a></1i> 
<li><a href="#">item</a></1i> 
<li><a href="#">item</a></1i> 
</ul> 
</1i> 
<1i><a href="#">menu</a> 
<ul> 
<li><a href="#">item</a></1i> 
<li><a href="#">item</a></1i> 
<li><a href="#">item</a></1i> 
</ul> 
</1i> 
<li><a href="#">menu</a> 
<ul> 
<li><a href="#">item</a></1i> 
<li><a href="#">item</a></1i> 
<li><a href="#">item</a></1i> 
</ul> 
</1i> 
<li><a href="#">menu</a> 
<ul> 
<li><a href="#">item</a></1i> 
<1i><a href="#">item</a></1i> 
<li><a href="#">item</a></1i> 
</ul> 
</1i> 
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</ul> 
</body> 
</html> 
设置 <ul> 元 素 的 list-style-type 属性 为 none, 清除 列表 的 原点 标记 。 刷新 页 面 后 ,效果 如 下 图 所 示 。 


€ 3 © Dlocalhost/20/20.2.1.html 


为 了 让 子 菜单 项 在 页 面 加 载 时 隐藏 起 来 ， 可 以 设置 子 菜单 的 <ul> 元 素 display 属性 为 none， 当 
鼠标 悬 停 在 菜单 上 时 ， 可 以 设置 该 属性 为 block 显示 子 菜单 。 相 关 代码 如 下 : 
#menu 1i ul{ 
display:none; 
} 
#menu li:hover ulf{ 
display:block; 
} 


刷新 页 面 后 ， 当 鼠标 悬 停 在 菜单 项 上 时 ， 效 果 如 下 图 所 示 。 


为 了 使 页 面 更 加 美观 ， 我 们 为 菜单 和 子 菜单 分 别 设置 样式 。 相 关 代码 如 下 : 
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<style> 

i 
list-style-type:none; 

} 

1if{ 
width:60px; 
border:lpx solid #B8B8B8; 
text-align:center; 
margin:1px; 

} 

#menu li ulf{ 
display:none; 

} 

#menu li:hover ulf{ 
display:block; 

} 

a:link,a:visited{ 
display:block; 
font-weight:bold; 
background-color:#D9D9D9; 
Color:#F17022; 
padding: 5px; 
text-align:center; 
text-decoration:none; 

} 

a:hover,a:active{ 
background-color:#F17022; 
color:white; 

} 

</style> 


刷新 页 面 后 ， 效 果 如 下 图 所 示 。 
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我 们 发 现 此 时 菜单 的 <li> 元 素 边框 显示 出 来 了 ， 非 常 难看 ， 需 要 清除 。 但 是 ， 如 果 清 除 <li> 元 
素 的 边框 ,那么 所 有 元 素 的 边框 都 将 被 清除 ,为 了 保留 其 他 元 素 的 边框 , 我们 可 以 在 鼠标 悬 停 在 菜 
单项 上 时 通过 CSS 清除 边框 。 同 时 子 菜单 项 向 右 偏 移 太 多 ， 这 是 因为 子 菜单 项 <ul> 元 素 的 内 边 距 
和 外 边 距 影响 的 ， 需 要 进行 调整 。 相 关 代码 如 下 : 
#menu 1i ulf{ 
display:none; 
margin:0; 
padding-left:10px; 
} 
#menu li:hover{ 
border:0px; 
} 


再 次 刷新 页 面 后 ， 一 个 会 伸缩 的 列表 菜单 就 制作 完成 了 。 当 页 面 加 载 时 ， 只 显示 菜单 项 ， 如 
下 面 左 图 所 示 ， 当 鼠标 悬 停 在 菜单 项 上 时 ， 显 示 子 菜单 项 ， 如 下 面 右 图 所 示 。 
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22.3 ”表单 设计 概述 


表单 的 主要 功能 是 收集 信息 ， 将 用 户 提交 的 各 种 信息 传递 给 服务 器 ， 并 接收 服务 器 反馈 的 各 
种 信息 。 表 单 通常 用 于 注册 、 登 录 页 面 、 问 卷 调查 等 页 面 ， 根 据 功能 的 不 同 ， 表 单 页 面 上 的 元 素 也 
不 同 。 


22.3.1 表单 的 设计 原则 


表单 是 页 面 与 用 户 交互 的 重要 窗口 ， 在 设计 表单 时 ， 要 兼顾 页 面 功能 与 用 户 的 良好 体验 ， 遵 
循 布局 合理 、 层 级 分 明 、 良 好 体验 和 必要 验证 的 原则 。 

合理 布局 是 表单 设计 的 首要 原则 。 通 常情 况 下 ， 表 单元 素 可 采用 垂直 或 水 平 两 种 对 齐 方式 。 
如 果 采 用 垂直 对 齐 〈 如 下 面 左 图 所 示 )， 那 么 每 个 标签 和 对 应 的 数据 框 应 该 排列 在 垂直 方向 上 临近 
的 位 置 , 这 样 用 户 在 浏览 时 可 以 从 上 下 移动 视线 ; 如 果 选 择 左右 对 齐 表单 元 素 (如 下 面 右 图 所 示 ) ， 
那么 标签 应 该 靠 右 对 齐 ， 数 据 框 靠 左 对 齐 ， 这 样 标签 和 数据 框 就 会 相 邻 ， 不 会 因为 标签 的 长 短 而 影 
响 用 户 浏览 。 
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根据 功能 的 不 同 ， 表 单 中 的 元 素 会 有 所 差别 ， 但 是 无 论 元 素 有 多 少 ， 都 应 该 对 元 素 进行 分 组 ， 
要 么 功能 相近 的 元 素 排列 在 一 起 , 要 么 比较 重要 的 元 素 排列 在 一 起 , 这 样 用 户 就 能 够 区 分 表单 中 元 
素 的 主 次 ， 做 到 心中 有 数 。 另 外 ， 还 可 以 分 步骤 引导 用 户 填写 表单 ， 这 样 更 有 利于 与 用 户 的 友好 交互 。 

表单 中 的 元 素 不 仅 有 主 次 之 分 ， 并 且 重 要 的 元 素 需 要 加 以 提示 ， 如 可 以 在 对 应 数据 框 后面 添 
加 红色 的 星 号 ， 表 示 必 须要 填写 的 信息 。 有 些 信息 需要 符合 一 定 的 规则 ， 比 如 邮箱 或 密码 ， 可 以 在 
对 应 数据 框 后 面 添 加 提示 信息 ， 说 明 这 些 信息 应 该 符合 什么 样 的 规则 。 

表单 中 的 信息 最 终 要 提交 服务 器 ， 对 于 不 符合 要 求 的 信息 ， 在 提交 服务 器 之 前 就 应 该 进行 验 
证 , 这 样 可 以 避免 无 效 的 操作 。 当然 , 还 可 以 在 用 户 填 写 完 数据 框 之 后 就 进行 验证 , 如 果 验 证 失败 ， 
则 立刻 给 出 错误 提示 ， 以 便 用 户 更 正 ， 这 样 更 能 加 强 用 户 体验 。 


22.3.2 ”表单 应 用 分 类 


表单 的 基本 功能 是 采集 和 提交 数据 ， 根 据 应 用 场景 的 不 同 ， 表 单 可 以 分 为 登录 表单 、 注 册 表 
单 、 搜 索 表单 和 跳 转 表 单 等 。 
1. 用 户 注册 表单 


用 户 注册 表单 常见 于 网 站 注册 页 面 ， 通 常会 要 求 用 户 填写 用 户 名 、 上 昵称、 密码 、 邮 箱 、 联 系 
方式 等 信息 。 例 如 下 图 是 网 易 电子 邮箱 的 用 户 注册 页 面 。 


用 “邮箱 大 师 ” 
Ease 
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2. 用 户 登录 表单 


用 户 登 录 表 单 常 见于 网 站 登录 页 面 ， 通 常会 要 求 用 户 填写 用 户 名 和 密码 ， 目 前 很 多 网 站 为 防 
止 恶意 登录 都 添加 了 验证 码 。 例 如 下 图 是 京东 商城 的 登录 页 面 。 


© a hups//passportjd com 


DI “aaa 


3. 搜索 表单 


搜索 表单 常见 于 一 些 搜索 引擎 页 面 ， 用 户 只 需要 填写 搜索 的 关键 字 ， 然 后 提交 表单 即 可 。 例 
如 下 图 是 微软 的 Bing 搜索 页 面 。 


4. 跳 转 表单 

跳 转 表单 常见 于 网 站 内 各 页 面 间 的 数据 交换 ， 通 常 表单 的 action 属性 值 为 目标 页 面 ， 当 用 户 
单 击 提交 按钮 后 ,当前 表单 的 所 有 内 容 都 会 提交 到 目标 页 面 , 而 目标 页 面 接收 到 这 些 信息 后 可 以 进 
行 更 多 的 操作 。 
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22.3.3 实例: 经 典 表单 效果 
以 下 是 几 个 经 典 的 表单 效果 。 


22.4 表单 的 设计 


表单 设计 是 Web 开发 过 程 中 不 可 或 缺 的 一 部 分 内 容 ， 如 何 布局 各 种 表单 元 素 ，CSS 在 表单 设 
计 中 将 起 到 什么 作用 ， 本 节 将 详细 介绍 这 些 内 容 。 


22.4.1 form 标签 


表单 是 一 个 包含 表单 控件 的 区 域 ， 在 HIML 页 面 中 这 个 区 域 用 <form> 元 素 标记 ， 所 有 的 表单 
元 素 都 必须 包含 在 这 个 元 素 中 。<form> 元 素 有 三 个 基本 属性 , 分 别 为 name、method 和 action。 name 
属性 用 于 定义 表单 的 名 称 , method 属性 用 于 定义 数据 提交 的 方式 , action 属性 用 于 指定 表单 提交 的 
目标 。 

数据 提交 方式 有 两 种 ， 分 别 为 post 和 get， 默 认为 get。 如 果 采 用 post 方式， 浏览 器 就 会 对 表 
单 中 的 数据 进行 加 密 ， 将 这 些 信息 发 送 至 action 指定 的 目标 ; 如 果 采 用 get 方式 ,浏览 器 就 会 直接 
将 表单 中 的 数据 发 送 至 目标 ， 这 些 数据 会 附 在 浏览 器 的 URL 之 后 ， 用 “? ”分 隔 ， 参 数值 之 间 用 

“及 ”分 隔 。 
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22.4.2 ”表单 元 素 


表单 中 的 元 素 有 很 多 种 ， 每 个 元 素 的 功能 都 不 同 ， 有 的 用 于 展示 页 面 内 容 ， 有 的 用 于 收集 页 
面 信息 。 下 面 详细 介绍 这 些 表单 元 素 的 使 用 方法 。 


1. 输入 标记 input 
<input> 元 素 用 于 form 表单 的 信息 输入 ， 可 以 是 文本 字段 、 密 码 、 单 击 按钮 、 提 交 按 钮 、 复 选 
框 、 单 选 按钮 等 多 种 类 型 。 该 元 素 有 很 多 个 属性 ， 但 是 在 使 用 时 必须 有 type 和 name 属性 。 根据 不 


同 的 type 属性 值 ， 元 素 可 以 显示 为 多 种 类 型 的 控件 ， 而 name 属性 则 是 唯一 表示 该 元 素 的 名 称 。 下 
图 是 <input> 元 素 在 各 种 type 属性 值 时 的 显示 效果 。 


3 nusber: 到 守 往 入 枢 ， 只 能 铂 入 数字 
， 久 checkbox: 多 选 框 ee passvord: 盏 码 答 入 杠 
， | -olor， 颜 色 近 择 杠 。 二 radioy 单 选 要 
ET dte: 日 期 输入 杠 是 ranget 滑 所 
datetime， 日 期 加 时 间 输 入 要 ， [本 resot: 得 村 按钮 ， 可 重生 所 有 控件 值 
四 ET datetiae-local。 本 地 日 期 加 时 间 答 入 杠 “EGG search: 搜索 杠 


nm。 il: Renil 答 入 要 | 二 问 】 submit: 提交 执 钥 | 

| 二 扫 文 件 下 过 但 任何 文件 file: 文件 选择 控件 0 tel: 电话 答 入 框 

， hidden 隐藏 城 ， 所 以 什么 都 看 不 见 四 text: 文本 答 入 杠 
tiee: 时 间 输 入 框 


9 Pepih url: 链接 地 址 输入 杠 


image: 图 像 
ams 年 04 月 month: 月 份 答 入 框 


(7 因为 各 种 浏览 器 对 HTML 的 支持 程度 不 一 样 ， 所 以 在 页 面 中 显示 的 效果 也 不 一 样 。 
提 示 
2. 文本 域 text 
当 <input> 元 素 的 属性 值 为 text 时 ,表示 该 控件 是 一 个 文本 域 , 用 于 输入 文本 字段 ， 代 码 如 下 : 
<input type="text" name="text" value="" /> 
文本 域 中 输入 的 文本 没有 特定 的 要 求 ， 可 以 是 字母 、 数 据 、 汉 字 、 标 点 等 任何 文本 字段 。 
3. 密码 域 password 
当 <input> 元 素 的 属性 值 为 password 时 ， 表 示 该 控件 是 一 个 密码 域 ， 用 于 输入 密码 。 当 在 密码 


域 中 输入 信息 时 ， 输 入 的 内 容 将 显示 为 圆 点 。 当 表单 以 get 方式 提交 时 ， 密 码 将 显示 在 地 址 栏 中 。 
密码 域 的 代码 如 下 : 


<input type="password" name="password" value="" /> 


运行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 
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4. 文件 域 fle 
当 <input> 元 素 的 属性 值 为 fle 时 ， 表 示 该 控件 是 一 个 文件 域 。 使 用 文件 域 可 以 浏览 计算 机 上 
的 某 个 文件 ， 并 将 该 文件 作为 表单 数据 上 传 。 文 件 域 的 代码 如 下 : 
<input type="file" name="file" value="" /> 
运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 
选择 文件 | 未 选择 任何 文件 
5. 复 选 框 checkbox 


当 <input> 元 素 的 属性 值 为 sheckbox 时 ， 表 示 该 控件 是 一 个 复 选 框 。 一 个 页 面 中 可 以 有 多 个 复 
选 框 , 多 个 复 选 框 中 name 值 相同 的 为 一 组 , 用 户 可 以 在 一 组 中 选择 多 个 选项 。 复 选 框 的 代码 如 下 : 

<input type="checkbox"” name="chk"” value="1"/> 阅 读 

<input type="checkbox" name="chk” value="2"/> 听 音乐 

<input type="checkbox” name="chk” value="3"/> 绘 画 

<input type="checkbox"”name="chk"” value="4"/> 跳 舞 

<input type="checkbox” name="chk” value="5"/> 武 术 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 
加 阅读 回 听 音乐 回 绘画 日 跳舞 日 武术 
6. 单 选 按钮 radio 


当 <input> 元 素 的 属性 值 为 radio 时 ,表示 该 控件 是 一 个 单 选 按钮 .页面 中 的 多 个 单 选 按钮 , name 
值 相同 的 为 一 组 ， 每 组 中 用 户 只 能 选中 一 个 选项 ， 多 个 选项 之 间 相 互 排斥 。 若 更 换 选 中 项 ， 则 之 前 
选中 的 选项 将 会 被 取消 。 单 选 按钮 代码 如 下 : 

<input type="radio" name="rad" value="1"/> 男 

<input type="radio" name="rad" value="2"/> 女 


运行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 
图 男 @ 女 
7. 提交 按钮 submit 
当 <input> 元 素 的 属性 值 为 submit 时 ， 表 示 该 控件 是 一 个 提交 按钮 。 当 单 击 该 按钮 时 ， 表 单 中 
所 有 控件 的 值 将 被 提交 到 action 指定 的 地 址 ， 同 时 清空 所 有 控件 中 的 数据 。 提 交 按 钮 的 代码 如 下 : 
<input type="submit" name="submit" /> 
运行 这 段 代 码 后， 效果 如 下 图 所 示 。 
[提交 | 
8. 图 像 域 image 
当 <input> 元 素 的 属性 值 为 image 时 ， 表 示 该 控件 是 一 个 图 像 域 。 图 像 域 的 功能 和 提交 按钮 的 
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功能 相同 ， 都 能 用 于 提 价 表单 数据 ， 但 是 图 像 域 可 以 为 提交 按钮 指定 一 个 图 像 ， 当 单 击 该 图 像 时 ， 
即 可 执行 提交 操作 。 图 像 域 的 代码 如 下 : 


<input type="image" src="photo01.jpg" width="15%" height="15%" name="image" /> 


9. 隐藏 域 hidden 


当 <input> 元 素 的 属性 值 为 hidden 时 ， 表 示 该 控件 是 一 个 隐藏 域 。 隐 藏 域 用 于 存储 用 户 输入 的 
信息 ， 如 姓名 或 电子 邮件 等 ， 并 在 用 户 下 次 访问 此 站 点 时 使 用 这 些 信 息 。 隐 藏 域 在 页 面 中 不 显示 ， 
其 代码 如 下 : 


<input type="hidden" name="hidden" value="" /> 


10. 菜单 /列表 select、option 


每 一 组 菜单 用 <select> 元 素 表示 ， 菜 单 中 的 每 一 项 用 <option> 元 素 表示 。 每 组 菜单 中 可 以 有 多 
个 选项 ， 其 中 选中 的 项 在 表单 提交 时 作为 该 菜单 的 值 。 菜 单 /列表 的 代码 如 下 : 
<select> 
<option value="1"> 列 表 项 1</option> 
<option value="2"> 列 表 项 2</option> 
<option value="3"> 列 表 项 3</option> 
</select> 


运行 这 段 代 码 后， 效果 如 下 图 所 示 。 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 


11. 多 行文 本 域 


文本 域 中 只 能 输入 单行 文本 ， 如 果 需 要 输入 多 行文 本 ， 就 可 以 使 用 多 行文 本 域 。 在 HTML 中 ， 
文本 域 用 <textarea> 元 素 表示 ， 可 以 使 用 eols 属性 设置 多 行文 本 域 中 显示 的 列 数 ， 使 用 rows 属性 设 
置 多 行文 本 域 中 显示 的 行 数 。 多 行文 本 域 的 代码 如 下 : 

<textarea cols="30" rows="2"> 

第 一 行内 容 

第 二 行内 容 


</textarea> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 
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12. 标签 


<label> 元 素 用 于 显示 标签 , 但 是 在 页 面 中 标签 不 会 显示 效果 。 如 果 在 <label> 元 素 内 单 击 文本 ， 
就 会 触发 此 控件 。 例 如 下 面 这 段 代码 : 


<p><label><input type="radio" name="rad" /> 男 </label></p> 
<p><label><input type="radio" name="rad"” /> 女 </label></p> 


在 这 段 代码 中 ，<label> 元 素 有 一 个 单 选 按钮 和 对 应 的 文字 ， 如 果 单 击 文字 ， 也 可 以 选中 相应 
的 单 选 按钮 。 这 段 代 码 还 可 以 写成 以 下 的 方式 。 

<input type="radio" name="sex" id="male" /> 

<label for="male"> 男 </label> 

<input type="radio" name="sex" id="female" /> 

<label for="female"> 女 </label> 


13. 字段 集 


<filedset> 元 素 用 于 显示 字段 集 ， 可 以 使 用 该 元 素 对 表单 中 的 多 个 元 素 进行 分 组 ， 分 组 后 的 元 
素 有 一 个 边框 ，<lengend> 元 素 用 于 设置 该 组 的 标题 ， 标 题 将 显示 在 边框 中 。 字 段 集 的 代码 如 下 : 

<fieldset> 

<legend> 登 录 界 面 </legend> 

用 户 名 : <input type="text" name="userName"/><br><br> 

密 码 : <input type="password" name="userPass"/><br><br> 

<input type="submit"” value=" 登 录 "/> 
</fieldset> 


运行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 
登录 界面 
用 户 名 : 


密 玛 : 


莹 陆 


22.4.3 ”对 表单 文本 应 用 样式 


可 以 使 用 CSS 中 的 字体 样式 对 表单 中 的 文本 设置 各 种 样式 ， 包 括 font-family、font-style、 
font-weight、font-size 和 font 等 ， 相 信 大 家 对 这 些 样式 的 使 用 方法 都 已 经 非常 熟悉 了 ， 这 里 就 不 再 
效 述 。 如 果 表单 中 按钮 的 默认 字体 不 是 很 好 看 ， 就 可 以 通过 CSS 样式 进行 设置 ， 例 如 下 面 的 代码 : 

<input type="button"” name="btnA"” value=" 按 钮 "/> 

<input type="button"” name="btnR" value=" 按 钮 "style="font-size:14px; 
font-weight:bold"/> 

运行 这 段 代 码 后， 效果 如 下 图 所 示 。 

按钮 | 按钮 


另外 ， 使 用 CSS 样式 还 可 以 对 文本 框 、 多 行文 本 框 、 密 码 框 、 菜 单列 表 框 等 所 有 与 字体 有 关 
的 表单 元 素 进行 设置 。 
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22.4.4 实例 : 滑 块 复 选 框 


本 例 将 制作 一 个 滑 块 复 选 框 ， 效 果 如 下 图 所 示 。 当 复 选 框 未 选中 时 ， 滑 块 在 左边 ， 如 下 面 左 
图 所 示 ， 当 复 选 框 选 中 时 ， 滑 块 在 右边 并 改变 颜色 ， 如 下 面 右 图 所 示 。 


为 了 让 CSS 能 够 控制 选中 与 未 选中 的 事件 , 我 们 需要 一 个 <label> 元 素 。 当 单 击 <label> 元 素 时 ， 
使 用 伪 类 选择 器 控制 复 选 框 的 样式 。 

创建 复 选 框 的 HTML 代码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 滑 块 复 选 框 </title> 
</head> 
<body> 
<div> 
<section> 

<div class="myCheckbox"> 

<input type="checkbox" value="1"” id="myCheckboxInput" name="" /> 
<label for="myCheckboxInput"></label> 

</div> 
</section> 
</div> 
</body> 
</html> 


为 了 显示 这 样 的 效果 ， 需 要 先 隐藏 复 选 框 原 有 的 样式 。 代 码 如 下 : 
input [type=checkbox] { 

visibility: hidden; 
} 


然后 设置 <div> 元 素 的 样式 ， 定 义 <div> 元 素 的 尺寸 、 背 景色 和 外 边 距 ， 并 使 用 border-radius 设 
置 圆 角 ， 以 及 确定 <div> 元 素 的 位 置 。 代 码 如 下 : 
.myCheckbox { 
width: 120px; 
height: 40px; 
background: #333; 
margin: 20px 60px; 
border-radius: 50px; 


position: relative; 
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使 用 :before 伪 类 创建 一 个 新 元 素 。 相 关 代 码 如 下 : 


.myCheckbox:before { 
content: 5 
position: absolute; 
top: 19px; 
left: 14px; 
height: 2px; 
width: 90px; 
background: #111; 

} 


为 了 绘制 滑 块 效 果 ， 我 们 需要 设置 <label> 元 素 的 样式 。 相 关 代码 如 下 : 


.myCheckbox label { 
display: block; 
width: 22px; 
height: 22px; 
border-radius: 50%; 


-webkit-transition: all .5s ease; 


-moz-transition: all .5s ease; 
-o-transition: all .5s ease; 
-ms-transition: all .5s ease; 


transition: all .5s ease; 
cursor: pointer; 
position: absolute; 
top: 9px; 
Zindex: 1 
left: 12px; 
background: #ddqd; 
} 


当 复 选 框 被 选中 时 ， 改 变 <label> 元 素 的 位 置 和 背景 色 。 相 关 代码 如 下 : 
.myCheckbox input[type=checkbox] :checked + label { 


left: 84px; 
background: #26ca28; 
» 
这 样 一 个 滑 块 效果 的 复 选 框 就 制作 完成 了 。 


22.4.5 ”实例 : 会 员 注册 页 面 


本 例 使 用 各 种 表单 控件 制作 一 个 会 员 注 册页 面 ， 最 终 效果 如 下 图 所 示 。 
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“再 这 入 号 轴 


证 人 类型 | 斌 证 了 
证 3 本 
订阅 “ 目 贡 R 目 考 育 目次 乐 日 军事 


是 再 县 站 按 受 箱 广 活动 居 东 日 吾 


首先 新 建 一 个 HTML 页 面 ， 按 照 最 终 效果 图 编写 HTML 页 面 代码 。 相 关 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 会 员 注册 </title> 
</head> 
<body> 
<div id="regmain"> 
<form> 
<h2> 会 员 注 册 </h2> 
<ul> 
<li><span class="mustItem"> 用 户 名 </span><input type="text" 
name="username"” Value=" 例 如 : 张 三 1980"/></1i> 
<1i><span></span><span class="mark"> 由 6-12 位 英文 字母 或 数字 组 成 </span> 
SJ 
<li><span class="mustItem"> 性 别 </span><input type="radio" name="sex" 
class="sex" value="]l" checked /> 男 <input type="radio" name="sex" class="sex" 
value="2" /> 女 </1i> 
<li><span></span><span class="mark"></span></1i> 
<li><span class="mustItem"> 手 机 号 码 </span><input type="tel" name="tel" 
value=" 建 议 使 用 手机 号 码 注册 "/></1i> 
<li><span></span><span class="mark"> 请 正确 填写 您 的 手机 号 码 ， 以 便 预 定 相关 服 
务 </span></1i> 
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<li><span class="mustItem"> 电 子 邮 件 </span><input type="email" 
name="email"”value=" 请 填写 常用 邮箱 "/></1i> 
<li><span></span><span class="mark"> 格 式 X*X@XX.XXX</span></1i> 
<li><span class="mustItem"> 密 码 </span><input type="password" 
name="password"/></1i> 
<li><span></span><span class="mark"> 由 6-12 数字 组 成 </span></1i> 
<li><span class="mustItem"> 再 次 输入 密码 </span><input type="password" 
name="confirmpassword"/></1i> 
<li><span></span><span class="mark"></span></1i> 
<1i><span> 证 件 类 型 </span><select name="usercard"> 
<option value="1"> 身 份 证 </option> 
<option value="2"> 军 官 证 </option> 
<option value="3"> 行 驶 证 </option></select></1i> 
<li><span></span><span class="mark"></span></1i> 
<1i><span> 证 件 号 码 </span><input type="text" name="cardNum"/></1i> 
<li><span></span><span class="mark"></span></1i> 
<1Li><span> 订 阅 </span> 
<input type="checkbox" name="order" class="order" value="orderA"> 
资讯 </input> 
<input type="checkbox" name="order" class="order" value="orderB"> 
体育 </input> 
<input type="checkbox" name="order" class="order" value="orderC"> 
娱乐 </input> 
<input type="checkbox" name="order" class="order" value="orderD"> 
军事 </input> 
</1i> 
<li><span></span><span class="mark"></span></1i> 
<1i><span> 是 否 愿意 接受 推广 活动 </span><input type="radio" name="sex" 
class="acc" value="Y" checked /> 是 <input type="radio" name="sex" class="acc" 
value="N"” /> 否 </1i> 
<li><span></span><span class="mark"></span></1i> 
<li><textarea name="rules">XX 网 服务 条 款 


XX 网 通过 国际 互联 网 络 为 您 提供 一 种 全 新 的 在 线 社交 方式 ， 您 只 有 完全 同意 下 列 所 有 服务 条 款 
并 完成 注册 程序 ,才能 成 为 X X 网 的 用 户 并 使 用 相应 服务 。 您 在 使 用 X X 网 提供 的 各 项 服务 之 前 ,应 仔细 阅 
读本 用 户 协议 。 

您 在 注册 程序 过 程 中 单 击 "同意 条 款 ， 立 即 注册 "按钮 即 表示 您 与 X X 网 达成 协议 ， 完 全 接受 本 服 
务 条 款项 下 的 全 部 条 款 。 您 一 旦 使 用 X X 网 的 服务 ， 即 视 为 您 已 了 解 并 完全 同意 本 服务 条 款 各 项 内 容 ， 包括 
XX 网 对 服务 条 款 随时 做 的 任何 修改 。 


一 . 服务 内 容 
XX 网 的 具体 服务 内 容 由 X X 网 根据 实际 情况 提供 ， 例 如 个 人 信息 、 个 人 分 享 信息 以 及 评论 ， 在 
线 交 流 等 。X X 网 保留 变更 、 中 断 或 终止 部 分 网 络 服务 的 权利 。 
XX 网 保留 根据 实际 情况 随时 调整 x X 网 平台 提供 的 服务 种 类 、 形 式 。X X 网 不 承担 因 业 务 调整 
给 用 户 造成 的 损失 。 


378 | HTML5+CSS3+JavaScript 前 端 开发 基础 


三 注册 义务 
为 了 能 使 用 本 服务 , 您 同意 以 下 事项 : 依 本 服务 注册 提示 请 您 填写 正确 的 注册 邮箱 、 密码 和 名 号 ， 
并 确保 今后 更 新 的 登录 邮箱 、 名 号 、 头 像 等 资料 的 有 效 性 和 合法 性 。 若 您 提供 任何 违法 、 不 道德 或 X X 认 为 
不 适合 在 X X 上 展示 的 资料 , 或 者 X X 有 理由 怀疑 您 的 资料 属于 程序 或 恶意 操作 ，X X 有 权 暂 停 或 终止 您 的 
账号 ， 并 拒绝 您 于 现在 和 未 来 使 用 本 服务 之 全 部 或 任何 部 分 。 
X X 无 须 对 任何 用 户 的 任何 登记 资料 承担 任何 责任 ， 包 括 但 不 限于 鉴别 、 核 实 任何 登记 资料 的 真 
实 性 、 正 确 性 、 完 整 性 、 适 用 性 及 /或 是 否 为 最 新 资料 的 责任 。</textarea></1i> 
<1i><input type="submit"” value=" 同 意 服务 条 款 ， 提 交 注 册 信 息 "/></1i> 
</ul> 
</form> 
</div> 
</body> 
</html> 


因为 目前 还 没有 为 这 个 页 面 设置 任何 样式 ， 所 以 这 样 页 面 运行 后 的 效果 非常 丑陋 ， 如 下 图 所 示 。 
ee 2 - 


€ 言 GDiocalhosVz0/2043html 


会 员 注册 


。 用 户 名 [6; 于 三 1985 
。 由] 于 每 式 数 字 表 成 


1 
机 ， 以 便 预 定 相关 服务 


。 订阅 是 们 和 日 体 育 自如 乐 日 
。 是 否 原委 按 受 推广 活动 硬是 提 否 
”二 两 
古语 王 训 各 寺 和 


下 面 我 们 为 表单 中 的 控件 设置 一 些 基础 样式 ， 包 括 内 外 边 距 、 字 体 、 颜 色 、 大 小 和 边框 等 。 
相关 代码 如 下 : 

<style> 

eb 
margin:0; 
padding:0; 

} 

#regmain{ 
font-size:13px; 
width:800px; 
margin:50px auto; 
border:lpx solid #1A5FAA; 
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h2{ 
background-color:#1A5FAA; 
color:white; 
padding:5px 0 S5px 50px; 


width:600px; 
margin:50px auto; 


list-style-type:none; 
margin:5px auto; 
color:#717171; 
font-size:13px; 


} 

.mark{ 
color:#999999; 
display:inline-block; 
padding-bottom:10px; 
font-size:12px; 

} 


input, select{ 
width:260px; 
height:25px; 
border:lpx solid #999999; 
border-radius: 4px; 
color:#999999; 

} 

textareal{ 
width:400px; 
height:100px; 
margin-bottom:10px; 
font-size:12px; 
color:#999999; 

} 

</style> 


刷新 页 面 后 ， 效 果 如 下 面 左 图 所 示 。 虽 然 现在 的 效果 比 刚才 好 了 一 些 ， 但 是 仍然 很 粮 糕 ， 例 
如 表单 中 的 标签 和 对 应 的 数据 框 排列 很 乱 ， 在 垂直 方向 上 并 没有 对 齐 。 观 察 表单 中 的 元 素 , 所 有 的 
标签 都 在 <span> 元 素 中 ， 而 且 这 些 标签 都 是 <li> 元 素 中 的 第 一 个 <span> 元 素 ， 所 以 我 们 有 了 如 下 的 
样式 代码 。 


span:first-of-typet{ 


display:inline-block; 
width:200px; 
text-align:right; 
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font-weight:bold; 
margin-right:10px; 
} 


刷新 页 面 后 ， 所 有 的 标签 和 对 应 的 数据 框 在 垂直 方向 上 都 对 齐 了 ， 而 且 标签 的 字体 显示 为 粗 
体 ， 效 果 如 下 面 右 图 所 示 。 


此 时 再 看 所 有 的 单 选 按钮 和 复 选 框 ， 在 水 平方 向 上 的 间距 太 大 ， 甚 至 超出 了 单行 显示 ， 所 以 
需要 为 其 设置 样式 。 另外, 还 有 提交 按钮 , 我 们 并 不 满意 系统 默认 的 效果 , 需要 单独 为 其 设置 样式 。 
相关 代码 如 下 : 


input [type="radio"]{ 
width:auto; 
height:25px; 
border:lpx solid #999999; 
padding:0; 
margin:0 Spx; 
vertical-align:middle; 

有 

input [type="checkbox"] { 
width:auto; 
height:25px; 
border:lpx solid #999999; 
padding:0; 
margin:0 Spx; 
vertical-align:middle; 

上 

input [type="submit"] { 
color:white; 
background-color:#58AD44; 
padding:5px 10px; 
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border-radius:8px; 
font-weight:bold; 
} 


刷新 页 面 后 ， 效 果 如 下 面 左 图 所 示 。 我 们 还 想 让 页 面 下 面 的 服务 条 款 和 提交 按钮 居中 显示 ， 
并 且 让 服务 条 款 显示 框 更 大 些 , 但 是 这 两 个 控件 都 在 <li> 元 素 中 ， 如果 单 纯 地 设置 <li> 元 素 的 属性 ， 
就 会 更 改 整个 页 面 的 布局 效果 。 为 了 定位 这 两 个 元 素 ， 我 们 设置 了 如 下 样式 。 
li:nth-last-child(1),1li:nth-last-child(2){ 
text-align:center; 


} 
刷新 页 面 后 ， 效 果 如 下 面 右 图 所 示 。 


在 注册 页 面 中 ， 我 们 希望 有 些 信息 用 户 必须 填写 ， 和 否则 无 法 通过 验证 ， 为 此 ， 需 要 让 用 户 知 
道 哪些 信息 是 必须 填写 的 ， 在 这 些 信息 的 标签 前 面 添加 一 个 红色 星 号 “*”。 在 HIML 页 面 中 ， 所 
有 必须 要 填写 的 信息 ， 它 们 的 标签 都 有 统一 的 class 属性 值 ， 这 样 就 可 以 轻松 实现 在 标签 前 面 插入 
星 号 的 效果 了 。 相 关 代 码 如 下 : 

.mustItem:before{ 

content:"* ™; 


color:red; 


刷新 页 面 后 ， 效 果 如 下 面 左 图 所 示 。 为 了 让 用 户 体验 更 好 些 ， 还 可 以 设置 当 鼠 标 悬 停 在 输入 
控件 时 改变 其 边框 颜色 ， 让 控件 显示 更 突出 。 相 关 代 码 如 下 : 
input:hovert{ 
border:2px solid #555555; 
1， 


刷新 页 面 后 ， 将 鼠标 悬 停 在 输入 框 上 ， 效 果 如 下 面 右 图 所 示 。 至 此 ， 会 员 注册 页 面 就 全 部 制 
作 完成 了 。 
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测试 题 


(1) HTML 中 的 列表 分 为 哪 几 类 ? 分 别 是 什么 ? 
(2) 如 何 使 用 列表 制作 垂直 与 水 平 导航 条 ? 
(3) 表单 设计 中 应 遵循 哪些 原则 ? 

(4) 如 何 设置 复 选 框 的 样式 ? 


22.5 ”本 章 小 结 


本 章 主要 介绍 了 如 何 使 用 CSS 设置 列表 和 表单 样式 ， 其 中 包括 创建 垂直 与 水 平 导航 条 、 创 建 
多 级 列表 菜单 、 创 建 伸缩 列表 菜单 、 表 单元 素 介绍 等 。 通 过 本 章 的 学 习 ， 读 者 应 该 熟练 掌握 使 用 列 
表 制 作 导 航 条 和 菜单 的 方法 ， 并 能 使 用 CSS 样式 为 表单 中 的 各 种 元 素 设置 样式 。 


对 超 链 接 和 鼠标 应 用 样式 


超 链接 是 整个 互联 网 的 基础 ， 也 是 网 页 中 最 重要 、 最 根本 的 元 素 之 一 。 通 过 超 链 接 能 够 实现 
页 面 的 跳 转 ， 将 网 站 中 的 每 个 网 页 关联 在 一 起 。 通 过 CSS 样式 设置 ， 不 仅 可 以 显示 超 链接 在 各 种 
状态 下 的 效果 ,还 可 以 制作 各 种 各 样 的 超 链接 。 鼠 标 是 我 们 使 用 最 频繁 的 操作 设备 之 一 ， 通 过 对 鼠 
标 样式 的 设置 ， 可 以 增加 更 多 的 功能 和 趣味 。 


23.1 使 用 CSS 设置 超 链接 


如 果 没有 超 链接 ， 在 互联 网 要 从 一 个 页 面 跳 转 到 另 一 个 页 面 ， 将 会 是 一 件 非常 麻烦 的 事情 ， 
而 超 链接 让 它 变 得 非常 简单 。 本 节 将 介绍 有 关 超 链接 的 一 些 知识 。 


23.1.1 什么 是 超 链接 


首先 弄 明白 什么 是 超 链接 ， 超 链接 是 指 从 一 个 页 面 指向 一 个 目标 的 连接 关系 ， 这 个 目标 可 以 
是 另 一 个 网 页 ， 也 可 以 是 相同 网 页 上 的 不 同位 置 ， 还 可 以 是 一 张 图 片 、 一 个 电子 邮件 地 址 、 一 个 文 
件 ， 甚 至 是 一 个 应 用 程序 。 而 用 来 超 链接 的 对 象 ， 可 以 是 一 段 文本 或 是 一 张 图 片 。 

超 链接 在 HIML 页 面 中 用 <a> 元 素 表示 ， 元 素 中 间 的 内 容 是 超 链 接 的 对 象 。 例 如 以 下 两 个 超 
链接 ， 第 一 个 是 文本 超 链接 ， 第 二 个 图 片 超 链接 。 

<a href="http://www.baidu.com"> 百 度 </a><br> 

<a href="http://www.baidu.com"><img src="photo01.jpg" /></a><br> 


文本 超 链接 默认 为 蓝 色 字体 且 有 下 画 线 ， 而 图 片 超 链接 则 显示 一 张 图 片 。 当 鼠标 悬 停 在 超 链 
接 上 时 ， 默 认 变 成 一 个 手 的 形状 ， 效 果 如 下 图 所 示 。 
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D localhost/21/21.1.1.html 


i 


wwwbaidu.com 


23.1.2 ”关于 超 链接 路 径 


按照 超 链接 路 径 的 不 同 ， 可 以 分 为 内 部 链接 、 外 部 链接 、 锚 记 链 接 和 脚本 链接 。 根 据 不 同 的 
路 径 ， 可 以 在 网 页 上 设置 不 同 的 超 链接 。 

内 部 链接 是 指 链接 到 当前 网 站 内 部 其 他 页 面 的 超 链接 ， 此 时 的 链接 地 址 是 目标 页 面相 对 于 当 
前 页 面 的 相对 路 径 。 例 如 下 面 的 代码 : 
<a href="home.html"> 主 页 </a> 


外 部 链接 是 指 链接 到 其 他 网 站 上 某 个 页 面 的 超 链接 ， 此 时 的 链接 地 址 是 其 他 目标 页 面 在 互联 
网 上 的 URL 地址。 例如 下 面 的 代码 : 


<a href="http://www.baidu.com"> 百 度 </a> 


锚 记 链接 是 指 链接 到 当前 页 面 其 他 位 置 的 超 链接 ， 此 时 的 链接 地 址 是 当前 页 面 中 的 锚 点 。 而 
在 HTML 页 面 中 ， 元 素 的 id 属性 和 name 属性 都 可 以 用 于 创建 锚 点 ， 使 用 锚 点 时 ， 需 要 在 锚 点 前 
添加 一 个 井 号“#”。 例 如 下 面 的 代码 : 

<a name="top"> 这 里 是 片头 </a> 

<a id="bottom"> 这 里 是 片尾 </a> 

<a href="#top"> 片 头 </a> 

<a href="#bottom"> 片 尾 </a> 


到 


如 果 锚 点 和 超 链 接 在 页 面 中 相距 的 位 置 比较 近 ， 当 单 击 超 链接 时 ， 页 面 不 会 有 明显 的 
注意 安 化 ， 但 是 地 址 栏 中 的 地 址 后 面 会 添加 超 链接 的 锚 点 。 


脚本 链接 是 指 当 单 击 超 链接 时 ， 可 以 执行 一 段 JavaScript 脚本 或 函数 ， 它 可 以 让 用 户 在 不 离开 
当前 页 面 的 情况 下 提供 一 些 附 加 信息 。 例 如 下 面 的 代码 : 
<a href="JavaScript:alert (' 我 是 脚本 ')"> 脚 本 链接 </a> 


23.1.3” 超 链接 属性 控制 
超 链接 是 HTML 中 的 一 个 重要 元 素 ， 它 有 很 多 属性 ， 常 用 的 属性 有 以 下 几 种 。 


(1) href: 设置 超 链接 指向 目标 的 URL 地 址 。 

(2) name: 设置 锚 点 的 名 称 。 

(3) target: 设置 打开 窗口 的 类 型 。 其 中 可 选择 的 值 有 4 种 ，_blank 表示 在 新 窗口 中 打开 连接 
的 文件 ，_self 也 是 默认 值 ， 表 示 在 相同 的 框架 中 打开 被 连接 的 文档 ; _parent 表示 在 父 框架 集中 打 
开 被 连接 的 文档 ，_top 表示 在 整个 窗口 中 打开 被 连接 的 文档 。 
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(4) type: 设置 被 连接 文档 的 MIME 类 型 。 
(5) rel: 设置 当前 文档 与 被 连接 文档 之 间 的 关系 。 


另外 , 还 可 以 使 用 伪 类 选择 器 设置 超 链接 在 各 种 状态 下 的 样式 , 例如 用 a:link 设置 未 被 选择 的 
超 链 接 的 样式 ， 用 a:hover 设置 当 鼠 标 移动 到 超 链接 上 时 超 链 接 的 样式 ， 用 a:active 设置 当 鼠 标 单 
击 超 链 接 时 超 链接 的 样式 ， 用 a:visited 设置 已 经 被 访问 过 的 超 链接 的 样式 。 


23.1.4 图像 映 射 


图 像 映 射 是 指 一 幅 图 像 可 以 创建 多 个 连接 ， 通 过 单 击 图 像 上 的 不 同 区 域 ， 超 链接 到 不 同 的 页 
面 地 址 。 在 HTML 中 ， 使 用 <map> 元 素 定义 映射 区 域 ， 使 用 <area> 元 素 添加 映射 区 域 。<area> 元 素 
有 三 个 属性 ，href 用 于 设置 超 链接 的 地 址 ，shape 用 于 说 明 映射 区 域 的 形状 ;coords 用 于 设置 映射 
区 域 的 边界 位 置 。 

coords 根据 shape 值 的 不 同 而 不 同 。shape 的 值 有 三 个 : 如 果 为 矩形 (rect) ， 则 coords 对 应 的 
坐标 为 左上 角 和 右 下 角 坐 标 ， 如 果 为 圆 (circle) ， 则 coords 对 应 的 是 圆心 (xy) 和 半径 r; 如 果 
为 多 边 形 ， 则 coords 对 应 的 是 多 边 形 每 个 点 的 坐标 。 例 如 下 面 的 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 图 像 映射 </title> 

</head> 

<body> 

<img src="photo01.jpg" usemap="myMap" /> 

<map name="myMap"> 

<area shape="rect" coords="200,390,300,480" href="#rect" target=" blank"> 

<area shape="circle" coords="250,170,100" href="#circle" target=" blank"> 

<area shape="poly" coords="100,380,100,480,200,380" href="#rect" 
target=" blank"> 


</map> 
</body> 
</html> 


Web 页 面 中 看 不 到 映射 区 域 的 效果 ， 但 是 在 Dreamweaver 的 设计 页 面 中 可 以 看 到 这 些 区 域 的 
效果 ， 如 下 图 所 示 。 
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23.1.5 ”实例 : 实现 多 页 面 跳 转 


本 例 将 演示 一 个 多 页 面 跳 转 的 效果 。 在 同一 个 浏览 器 窗口 中 ， 单 击 页 面 上 不 同 的 超 链接 ， 实 
现 多 个 页 面 之 间 的 跳 转 。 为 演示 此 功能 ， 我 们 需要 一 个 列表 , 并 且 列 表 中 显示 多 个 页 面 的 超 链接 地 
址 ， 每 个 地 址 对 应 一 个 HTML 页 面 。 相 关 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 页 面 跳 转 </title> 

<style> 

ulf{ 

list-style-type:none; 


} 

i 
margin:1px; 
border:lpx solid #B8B8B8; 
width:100px; 
float:left; 

} 

li:last-childf{ 
clear:right; 

} 

a:link,a:visited{ 
display:block; 
font-weight:bold; 
background-color:#D9D9D9; 
Color:#F17022; 
padding:S5px; 
text-align:center; 
text-decoration:none; 

} 

a:hover,a:active{ 
background-color:#F17022; 
color:white; 

} 

</style> 

</head> 

<body> 

<uL> 
<li><a href="home.html"> 主 页 </a></1i> 
<li><a href="blog.html"> 论 坛 </a></1i> 
<li><a href="projects.html"> 项 目 </a></1i> 
<li><a href="about .html"> 关 于 我 们 </a></1i> 
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每 个 超 链接 时 ， 都 会 跳 转 到 对 应 的 HIML 页 面 ， 效 果 如 下 图 所 示 。 


</uL> 

<br> 

<h1> 这 是 首页 面 </h1> 
</body> 

</html> 


列表 中 每 个 超 链接 对 应 的 HTML 页 面 代码 基本 相同 ， 只 有 <h1> 元 素 的 内 容 不 同 ， 这 样 当 单 击 


[SE * 
¢ 3 © Blocalhost/21/abouthtm 


主页 论坛 


这 是 关于 我 们 页 面 


23.2 ” 超 链接 特效 


通常 情况 下 ,我们 可 以 给 超 链接 设置 一 些 CSS 样式 ， 改 变 它们 原 有 的 样式 ， 比 如 取消 下 画 线 。 


另外 ， 还 可 以 通过 CSS 样式 设置 超 链接 的 一 些 特殊 效果 ， 比 如 让 超 链接 看 起 来 更 像 一 个 按钮 或 
浮雕 。 


23.2.1 实例 : 按钮 式 超 链 接 


果 ， 


通过 CSS 样式 设置 超 链接 的 文字 颜色 、 背 景色 、 位 置 、 边 框 等 属性 ， 再 加 上 伪 类 选择 器 的 效 
可 以 让 超 链接 看 起 来 更 像 一 个 按钮 。 例 如 下 面 的 代码 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 按 钮 式 超 链接 </title> 
<style> 
af 
font-family:Arial; 
font-size:18px; 
text-align:center; 
margin:10px; 
padding:5px 30px; 
和 
a:link,a:visited{ 
color:white; 
background-color:#2FAD85; 
text-decoration:none; 
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border-radius:3px; 
} 
a:hover{ 
background-color:#50CFA7; 
} 
</style> 
</head> 
<body> 
<br><br> 
<a href="#"> 下 载 </a> 
<a href="#"> 收 藏 </a> 
</body> 
</html> 


在 这 段 代码 中 ， 首 先 通过 标记 选择 器 设置 超 链接 的 基础 样式 ， 再 通过 伪 类 选择 器 分 别 设置 超 
链接 在 未 访问 状态 、 已 访问 状态 和 鼠标 悬 停 状 态 下 的 样式 ， 效 果 如 下 图 所 示 。 


© Dlocalhost/21/21.2.1.html ” 久 驴 友 三 


23.2.2 ”实例 : 浮雕 式 超 链接 


浮雕 式 超 链接 与 按钮 式 超 链接 的 制作 基本 类 似 ， 制 作 按钮 式 超 链接 需要 使 用 伪 类 选择 器 改变 
超 链接 的 背景 颜色 , 而 浮雕 式 超 链 接 则 需要 使 用 伪 类 选择 器 改变 超 链接 的 背景 图 片 , 让 超 链 接 看 起 
来 更 有 浮雕 效果 。 相 关 代码 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 浮 雕 超 链接 </title> 
<style> 
wl 
padding:0; 
margin:0; 


af 
font-family:Arial; 
font-size:12px; 
text-align:center; 
margin:1px; 
padding: 5px 30px; 
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} 

a:link,a:visited{ 
background-image:url (bg02.png); 
text-decoration:none; 
border-radius:3px; 

} 

a:hover{ 
background-image:url (bg01 .png); 

} 

</style> 

</head> 

<body> 

<br><br> 


<a href="#"> 三 年 一 班 </a><a href="#"> 三 年 二 班 </a> 


</body> 
</html> 


在 这 段 代 码 中 ， 我 们 为 超 链接 准备 了 两 张 不 同 的 背景 图 片 ， 当 超 链接 未 被 访问 和 访问 过 后 使 
用 bg02.png; 当 鼠 标 悬 停 在 超 链接 上 面 时 使 用 bg01.png。 这 样 就 制作 出 了 具有 浮雕 效果 的 超 链接 ， 


效果 如 下 图 所 示 。 


[a 


23.3 ”鼠标 特效 


在 windows 系统 中 ， 我 们 可 以 通过 系统 设置 改变 鼠标 
等 其 他 效果 。 在 HIML 页 面 中 ， 也 可 以 使 用 CSS 的 cursor 


23.3.1 CSS 控制 鼠标 箭头 


的 显示 方式 ， 可 以 是 箭头 、 手 形 或 工 字 
属性 设置 网 页 中 鼠标 的 显示 方式 。 


在 HIML 中 ， 任 何 元 素 都 有 cursor 属性 ， 通 过 CSS 设置 该 属性 ， 可 以 控制 鼠标 箭头 的 显示 效 
果 。CSS 提供 了 很 多 种 鼠标 箭头 效果 可 供 选择 ， 具 体 如 下 表 所 示 。 


属性 值 描 述 

default 默认 光标 《通常 是 一 个 箭头 ) 
auto 默认 。 浏 览 器 设置 的 光标 
crosshair 光标 呈现 为 十 字 线 


pointer 光标 呈现 为 指示 链接 的 指针 一 只 手 》 
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( 续 表 ) 
属性 值 描 述 
move 此 光标 指示 某 对 象 可 被 移动 
e-resize 此 光标 指示 和 矩形 框 的 边缘 可 被 向 右 〈 东 ) 移动 
ne-resize 此 光标 指示 和 矩形 框 的 边缘 可 被 向 上 及 向 右 移动 ( 北 / 东 ) 
nwW-resize 此 光标 指示 和 矩形 框 的 边缘 可 被 向 上 及 向 左 移动 ( 北 / 西 ) 
nresize 此 光标 指示 矩形 框 的 边缘 可 被 向 上 〈 北 ) 移动 
se-resize 此 光标 指示 矩形 框 的 边缘 可 被 向 下 及 向 右 移动 〈 南 / 东 ) 
SW-Iesize 此 光标 指示 矩形 框 的 边缘 可 被 向 下 及 向 左 移动 〈 南 / 西 ) 
S-resize 此 光标 指示 矩形 框 的 边缘 可 被 向 下 移动 〈 南 ) 
W-Iesize 此 光标 指示 矩形 框 的 边缘 可 被 向 左 移动 〈 西 ) 
text 此 光标 指示 文本 
Wait 此 光标 指示 程序 正 忙 ( 通 常 是 一 只 表 或 沙漏 ) 
help 此 光标 指示 可 用 的 帮助 (通常 是 一 个 问号 或 一 个 气球 ) 


23.3.2 实例: 鼠标 变化 的 超 链接 


既然 有 这 么 多 鼠标 特效 可 供 选择 ， 那 么 我 们 就 可 以 根据 超 链接 文本 的 内 容 ， 在 鼠标 悬 停 到 超 
链接 上 时 ， 改 变 鼠 标的 效果 。 相 关 代 码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 和 鼠标 变化 的 超 链接 </title> 

<style> 

af 
font-family:Arial; 
font-size:18px; 
text-align:center; 
margin:10px; 
padding:5px 30px; 

} 

a:link,a:visited{ 
color:white; 
background-color:#2FAD85; 
text-decoration:none; 
border-radius:3px; 

a:hovert{ 
background-color:#50CFA7; 

} 


a.crosshair:hovert{ 
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cursor:crosshair; 
} 
a.pointer:hover{ 
cursor:pointer; 
} 
a.move:hover{ 
cursor:move; 
} 
a.wait:hover{ 
cursor:wait; 
} 
a.help:hovert{ 
cursor:help; 
} 
</style> 
</head> 
<body> 
<br><br> 
<a class="crosshair"” href="#"> 十 字 线 </a> 
<a class="pointer" href="#"> 一 只 手 </a> 
<a class="move"” href="#"> 移 动 效 果 </a> 
<a class="wait"” href="#"> 等 待 </a> 
<a class="help"” href="#"> 帮 助 </a> 
</body> 
</html> 


运行 这 段 代码 后 ， 当 鼠标 悬 停 在 相应 的 超 链接 上 时 ， 鼠 标 就 会 显示 对 应 的 效果 ， 如 下 图 所 示 。 


测试 题 

(1) 根据 超 链接 的 路 径 ， 超 链接 可 分 为 哪 几 种 ? 
(2) 如 何 创建 图 像 映射 超 链接 ? 

(3) 如 何 创建 浮雕 式 超 链接 ? 

(4) CSS 中 通过 什么 属性 控制 鼠标 样式 ? 


23.4 ”本 章 小 结 


本 章 主要 介绍 了 如 何 对 超 链 接 和 鼠标 应 用 样式 。 通 过 本 章 的 学 习 ， 读 者 应 该 熟练 掌握 超 链 接 
样式 的 设置 方法 ， 如 何 创 建 各 种 特效 的 超 链接 样式 ， 以 及 如 何 通过 CSS 控制 鼠标 特效 。 


CSS 中 的 滤 镜 


在 一 些 图 形 处 理 软件 ， 比 如 Photoshop 中 经 常会 用 到 滤 镜 ， 它 可 以 用 很 简单 的 方法 对 页 面 中 的 
文字 做 出 特效 处 理 ， 如 阴影 、 模 糊 、 各 种 淡 入 淡出 效果 等 。 而 CSS 中 也 提供 了 滤 镜 功能 ， 同 样 可 
以 完成 在 图 形 处 理 软件 中 才 有 的 各 种 滤 镜 效果 。 本 章 将 详细 介绍 CSS 中 滤 镜 的 使 用 方法 。 


24.1 了 解 CSS 滤 镜 


CSS 中 提供 了 一 整套 滤 镜 功能 ， 完 全 可 以 蔡 代 Photoshop 的 滤 镜 功能 ， 这 对 不 熟悉 Photoshop 
的 用 户 来 说 ， 是 非常 好 的 一 件 事情 。 但 是 要 使 用 好 滤 镜 功能 ， 除 了 具备 一 定 的 美术 功底 外 ， 还 需要 
对 滤 镜 非常 熟悉 ， 并 能 灵活 使 用 。 


24.1.1 Alpha 滤 镜 
Alpha 滤 镜 用 于 对 透明 度 进 行 处 理 。 它 的 语法 如 下 : 
filter: alpha (opacity=opcity, finishopacity=finishopacity, 


style=style, startX=startX, startY=startY, finishX=finishX, 
finishY=finishY ) 


其 中 opacity 代表 透明 度 等 级 , 可 选 值 为 0-100, 0 代表 完全 透明 ，100 代表 完全 不 透明 。 Style 
参数 指定 了 透明 区 域 的 形状 特征 。finishopacity 是 一 个 可 选项 ， 用 来 设置 结束 时 的 透明 度 ， 从 而 达 
到 一 种 渐变 效果 ， 它 的 值 也 是 从 0~100。startX 和 startY 代表 渐变 透明 效果 的 开始 坐标 ，finishX 和 
finishY 代表 渐变 透明 效果 的 结束 坐标 。 除 了 opacity 是 必须 参数 外 ， 其 他 都 是 可 选 参数 。 

由 于 浏览 器 兼容 性 的 原因 ， 如 果 要 在 chrome 浏览 器 中 使 用 alpha 滤 镜 效果 ， 应 该 使 用 下 面 这 
种 语法 : 
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-webkit-filter:opacity(value); 


或 者 : 
opacity:value: 


value 表示 图 片 的 透明 值 , 范围 为 0~1, 0 表示 完全 透明 ,1 表示 完全 不 透明 。 例如 下 面 的 代码 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS 中 的 滤 镜 </title> 
“style> 
div{ 
margin:10px auto; 
text-align:center; 


} 

img{ 
width:30%; 
height:30%; 
display:inline; 

} 

#0opacityt{ 
—webkit-filter:opacity(0.4); 
margin-left:100px; 

} 

</style> 

</head> 

<body> 

<div> 


<img src="img.jpg"/><img id="opacity" src="img.jpg"/> 
</div> 
</body> 
</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 ， 左 边 图 形 是 没有 使 用 滤 镜 的 效果 ， 右 边 图 形 是 使 用 滤 镜 
的 效果 。 


€ 3 © |D localhost/22/22.1.1.html 
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24.1.2 ”Blur 滤 镜 


Blur 滤 镜 用 于 对 模糊 度 进行 处 理 。 它 的 语法 如 下 : 
filer: blur(value); 


其 中 value 表示 模糊 半径 ， 取 值 范围 为 0 至 NN 个 像素 ， 且 只 能 是 整数 。 如 果 值 为 0， 就 表示 没 
有 效果 。 例 如 下 面 的 代码 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSss 中 的 滤 镜 </title> 
<style> 
div { 
margin: 10px auto; 
text-align: center; 


} 

img { 
width: 30%; 
height: 30%; 
display: inline; 

} 

#0opacity { 
-Webkit-filter: blur(3px); 
-moz-filter: blur(3px); 
-o-filter: blur(3px); 
-ms-filter: blur(3px); 
filter: blur(3px); 
margin-left: 100px; 

, 

</style> 

</head> 

<body> 

<div> <img src="img.jpg"/><img id="opacity" src="img.jpg"/> </div> 

</body> 

</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 


EE 
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24.1.3 ”Grayscale 滤 镜 


Grayscale 滤 镜 主要 用 于 对 灰 度 进行 处 理 。 它 的 语法 如 下 : 
filer: grayscale(value): 


其 中 value 的 取 值 为 0~1 或 0~100%。 如 果 值 为 0， 就 表示 没有 效果 ; 如 果 值 为 1 或 100%， 就 
表示 最 大 效果 。 例 如 下 面 这 段 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS 中 的 滤 镜 </title> 

<style> 

div { 
margin: 10px auto; 
text-align: center; 

: 

img { 
width: 30%; 
height: 30%; 
display: inline; 

} 

#0opacity { 
—webkit-filter: grayscale (100%); 
-o-filter: grayscale(100%); 
-moz-filter: grayscale (100%); 
-ms-filter: grayscale(100%); 
filter: grayscale (100%); 
margin-left: 100px; 

} 

</style> 

</head> 

<body> 

<div> <img src="img.jpg"/><img id="opacity" src="img.jpg"/> </div> 

</body> 

</html> 


运行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 


EE 
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24.1.4 Sepia 滤 镜 


Sepia 渡 镜 主要 用 于 对 图 片 或 元 素 整体 进行 褐色 处 理 ， 其 效果 为 老 照片 效果 。 它 的 语法 如 下 : 
filer: sepia(value); 


其 中 value 的 取 值 为 0~1 或 0~100%。 如 果 值 为 0， 就 表示 无 效果 ; 如 果 值 为 1 或 100%， 就 表 
示 最 大 效果 。 例 如 下 面 这 段 代 码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS 中 的 滤 镜 </title> 

<style> 

div { 
margin: 10px auto; 
text-align: center; 

. 

img { 
width: 30%; 
height: 30%; 
display: inline; 

} 

#0opacity { 
-Webkit-filter: sepia(100%); 
-moz-filter: sepia(100%); 
-o-filter: sepia(100%); 
-ms-filter: sepia(100%); 
filter: sepia(100%); 
margin-left: 100px; 

} 

</style> 

</head> 

<body> 

<div> <img src="img.jpg"/><img id="opacity" src="img.jpg"/> </div> 

</body> 

</html> 


运行 这 段 代 码 后， 效果 如 下 图 所 示 。 


© [Slocalnost 
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24.1.5 “Brightness 滤 镜 


Brightness 滤 镜 主要 用 于 对 亮度 进行 处 理 。 它 的 语法 如 下 : 
filer: brightness(value); 


其 中 value 的 取 值 为 大 于 或 等 于 0 的 数字 或 百分比 。 如 果 值 为 1， 就 表示 无 效果 。 例 如 下 了 
段 代码 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSss 中 的 滤 镜 </title> 
<style> 
div { 
margin: 10px auto; 
text-align: center; 


局 
导 


} 

img { 
width: 30%; 
height: 30%; 
display: inline; 

} 

#0opacity { 
-Webkit-filter: brightness (2); 
-moz-filter: brightness(2) 7 
-o-filter: brightness (2) 
-ms-filter: brightness (2) 7 
filter: brightness (2) 7 
margin-left: 100px; 

} 

</style> 

</head> 

<body> 

<div> <img src="img.jpg"/><img id="opacity" src="img.jpg"/> </div> 

</body> 

</html> 


运行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 


EE 
ET 
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24.1.6 ”Hue-rotate 滤 镜 


Hue-rotate 滤 镜 主要 用 于 对 相 色 进 行 处 理 。 它 的 语法 如 下 : 
filer: hue-rotate(value); 


其 中 value 的 取 值 为 0 搭配 365, 单位 为 deg。 如 果 值 为 0, 就 表示 无 效果 。 例如 下 面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS 中 的 滤 镜 </title> 

<style> 

div { 
margin: 10px auto; 
text-align: center; 

} 

img { 
width: 30%; 
height: 30%; 
display: inline; 

} 

#opacity { 
-Webkit-filter: hue-rotate(200deg); 
-moz-filter: hue-rotate(200deg); 
-o-filter: hue-rotate(200deg); 
-ms-filter: hue-rotate(200deg); 
filter: hue-rotate(200deg); 
margin-left: 100px; 

} 

</style> 

</head> 

<body> 

<div> <img src="img.jpg"/><img id="opacity" src="img.jpg"/> </div> 

</body> 

</html> 


运行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 
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24.1.7 Invert 滤 镜 


Invert 滤 镜 主要 用 于 对 反 色 进行 处 理 。 它 的 语法 如 下 : 
filer: hue-Invert (value); 


其 中 value 的 取 值 为 0~1 或 0~100%。 如 果 值 为 0， 就 表示 无 效果 ; 如 果 值 为 1 或 100%， 就 表 
示 最 大 效果 。 例 如 下 面 这 段 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS 中 的 滤 镜 </title> 

<style> 

div { 
margin: 10px auto; 
text-align: center; 

} 

img { 
width: 30%; 
height: 30%; 
display: inline; 

} 

#0opacity { 
-webkit-filter: invert(1); 
-moz-filter: invert(1); 
-o-filter: invert(1); 
-ms-filter: invert (1); 
filter: invert(1); 
margin-left: 100px; 

} 

</style> 

</head> 

<body> 

<div> <img src="img.jpg"/><img id="opacity" src="img.jpg"/> </div> 

</body> 

</html> 


运行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 
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24.1.8 Saturate 滤 镜 


Saturate 滤 镜 主 要 用 于 对 饱和 度 进 行 处 理 。 它 的 语法 如 下 : 
filer: saturate(value) 


其 中 value 的 取 值 范围 为 大 于 或 等 于 0 的 数字 或 百分比 。 如 果 值 为 1， 就 表示 无 效果 ; 如 果 值 
为 0， 就 表示 为 灰 度 图 。 例 如 下 面 这 段 代 码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS 中 的 滤 镜 </title> 

<style> 

div { 
margin: 10px auto; 
text-align: center; 

. 

img { 
width: 30%; 
height: 30%; 
display: inline; 

} 

#0opacity { 
-webkit-filter: saturate (2); 
-moz-filter: saturate(2); 
-o-filter: saturate(2); 
-ms-filter: saturate(2); 
filter: saturate(2); 
margin-left: 100px; 

} 

</style> 

</head> 

<body> 

<div> <img src="img.jpg"/><img id="opacity" src="img.jpg"/> </div> 

</body> 

</html> 


运行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 
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€ 3 C [Slocanost 


第 24 章 CSS 中 的 滤 镜 


401 


24.1.9 ”Contrast 滤 镜 


Contrast 滤 镜 主要 用 


filer: contrast(value); 


于 对 对 比 度 进行 处 理 。 它 的 语法 如 下 : 


其 中 value 的 取 值 范围 为 大 于 或 等 于 0 的 数字 或 百分比 。 如 果 值 为 1， 就 表示 无 效果 。 例 如 下 


面 这 段 代码 : 
<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 
<title>CSsS 中 的 滤 镜 </title> 


<style> 
div { 
margin: 10px 


auto7 


text-align: center; 


. 

img { 
width: 30%; 
height: 30%; 


display: inline; 


} 
#0opacity { 


-webkit-filter: contrast (2); 


-moz-filter: 


contrast (2); 


-o-filter: contrast (2); 
-ms-filter: contrast (2); 
filter: contrast (2); 


margin-left: 
} 
</style> 
</head> 
<body> 


100px; 


<div> <img src="img.jpg"/><img id="opacity" src="img.jpg"/> </div> 


</body> 
</html> 


运行 这 段 代码 后 ， 效 果 如 下 图 所 示 。 
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24.1.10 ”Drop-shadow 滤 镜 


Drop-shadow 滤 镜 主要 用 于 对 阴影 进行 处 理 。 它 的 语法 如 下 : 
filer: drop-shadow(x-offset y-offset 阴影 模糊 半径 阴影 颜色 ); 


其 中 x-offset 和 y-offset 为 阴影 相对 于 元 素 左 上 角 的 位 移 距离 。 需 要 注意 的 是 ， 阴 影 的 外 观 受 
border-radius 样式 的 影响 。 另 外 ，:after 和 :before 等 伪 元 素 会 继承 阴影 的 效果 。 例 如 下 面 这 段 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSSs 中 的 滤 镜 </title> 
<style> 
div { 
margin: 10px auto; 
text-align: center; 


} 

img { 
width: 30%; 
height: 30%; 
display: inline; 

border::10px solid #8311117 

-webkit-border-radius: 10px7 

} 

#0opacity { 
—webkit-filter: drop-shadow(10px 10px Opx #333); 
-moz-filter: drop-shadow (1l0px 10pPX Opx #333); 
-o-filter: drop-shadow (1l0px 1l0px Opx #333); 
-ms-filter: drop-shadow(l10px 5px Opx #333); 
filter: drop-shadow(l10px 1l10px Opx #333); 
margin-left: 100px; 

} 

</style> 

</head> 

<body> 

<div> <img src="img.jpg"/><img id="opacity" src="img.jpg"/> </div> 

</body> 

</html> 


运行 这 段 代 码 后 ， 效 果 如 下 图 所 示 。 
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测试 题 
(1) CSS 中 Alpha 滤 镜 用 于 处 理 什 么 效果 ? 
(2) CSS 中 Blur 滤 镜 和 Drop-shadow 滤 镜 处 理 效果 有 什么 不 同 ? 
(3) 能 否 使 用 滤 镜 处 理 文字 效果 ? 
(4) 详细 解释 滤 镜 -webkit-filter: drop-shadow(10px 10px 0px #333) 中 各 参数 的 含义 。 


24.2 本章 小 结 


本 章 主 要 介绍 了 CSS 中 各 种 滤 镜 的 使 用 方法 。 通 过 本 章 的 学 习 ， 读 者 应 该 能 够 熟练 掌握 各 种 
滤 镜 的 使 用 方法 ， 并 且 在 使 用 滤 镜 的 过 程 中 ， 要 正确 对 待 不 同 浏览 器 的 处 理 效果 。 


项 目 实战 案例 


我 们 已 经 对 HTML5 和 CSS3 做 了 全 面 而 系统 的 介绍 ， 相 信 大 家 已 经 掌握 了 如 何 使 用 HTML5 
和 CSS3 制作 网 页 的 基本 技能 。 本 章 将 通过 两 个 项 目 实战 案例 ， 综 合 运用 前 面 学 习 的 各 种 知识 ， 加 
深 和 巩固 大 家 对 HTML5 和 CSS3 的 认识 。 


25.1 项 目 实战 案例 一 : 企业 门户 网 站 


企业 门户 网 站 是 企业 对 外 宣传 的 窗口 ， 本 例 将 使 用 HTML5 和 CSS3 制作 一 个 企业 门户 网 站 ， 
在 制作 的 过 程 中 ， 将 详细 介绍 网 页 中 各 个 元 素 的 作用 ， 以 及 如 何 使 用 CSS 对 页 面 中 的 元 素 设置 样 
式 。 首 先 我 们 来 看 一 下 门户 网 站 的 效果 ， 如 下 图 所 示 。 
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为 了 让 大 家 能 够 更 加 清楚 地 了 解 网 站 的 主体 结构 ， 我 们 对 这 个 网 站 的 组 织 结构 进行 了 分 析 。 


(1) header 结构 元 素 : 页 面 顶部 的 公司 Logo 和 名 称 ， 以 及 导航 条 都 属于 header 部 分 ， 有 的 
门户 网 站 还 会 将 广告 等 信息 也 放 在 这 个 结构 中 。 

(2) aside 结构 元 素 : 页 面 中 间 左 边 的 部 分 ， 这 部 分 经 常用 于 显示 与 当前 网 页 或 整个 网 站 相关 
的 一 些 信息 ， 如 文章 列表 、 商 品 列表 、 组 织 结构 、 友 情 链接 等 ， 有 的 门户 网 站 还 会 在 这 里 添加 一 些 
滚动 的 图 片 或 文字 信息 ， 这 样 可 以 让 整个 页 面 看 起 来 更 加 生动 。 

(3) section 结构 元 素 : 这 部 分 是 整个 网 站 所 有 页 面 的 主体 内 容 ， 当 网 站 中 多 个 页 面 之 间 相 互 
切换 的 时 候 ， 通 常 只 有 这 部 分 内 容 在 变化 ， 而 其 他 部 分 的 内 容 则 相对 保持 不 变 。 

(4) footer 结构 元 素 : 页 面 最 下 面 的 部 分 ， 每 一 个 页 面 都 应 该 有 一 个 footer 结构 元 素 ， 这 部 
分 内 容 通 常 为 网 站 的 版 权 声 明 、 备 案 信 息 、 联 系 方式 、 友 情 链接 等 。 


本 例 中 网 站 的 主体 结构 如 下 图 所 示 。 


有 了 这 个 主体 结构 图 之 后 ， 我 们 就 可 以 创建 基本 的 HIML 页 面 代码 了 。 先 创建 一 个 样式 表 文 
件 ， 并 且 所 有 的 样式 都 将 在 这 个 文件 中 完成 。 相 关 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 嘉 峻 制 衣 有 限 公 司 </title> 
<link rel="stylesheet" type="text/css" href="25.1.css"/> 
</head> 

<body> 

<header></header> 
<aside></aside> 
<section></section> 
<footer></footer> 
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</body> 
</html> 


header 元 素 中 包括 了 公司 的 Logo 图 片 、 中 /英文 语言 切换 链接 及 页 面 导航 条 。 我 们 先 用 <img> 
元 素 插入 公司 的 Logo 图 片 , 然后 分 别 用 列表 显示 中 /英文 语言 切换 链接 和 导航 条 ， 其 中 在 导航 条 的 
第 一 个 列表 项 中 填 入 一 个 空格 (空格 用 &nbsp:; 表 示 ) 。 相 关 代码 如 下 : 


<header> 


<img src="logo.gif"/> 
<ul id="header ul"> 
<li>|<span><a href="#"> 中 文 版 </a></span></1i> 
<li>|<span><a href="#">English</a></span></1i> 
</ul> 
<ul id="header nav"> 
<1i id="not item"><a href="#">&nbsp;</a></1i> 
<li><a "> 首页 </a></1i> 
<li><a "> 关于 嘉 峻 </a></1i> 
<li><a href="#"> 产 品 </a></1i> 
<li><a href="#"> 品 牌 </a></1i> 
<li><a href="#"> 权 威 认 证 </a></1i> 
<li><a href="#"> 新 闻 动 态 </a></1i> 
<1i><a href="#"> 合 作 伙 伴 </a></1i> 
<li><a href="#"> 人 才 招 聘 </a></1i> 
<1i><a href="#"> 联 系 我 们 </a></1i> 
</ul> 
</header> 


在 样式 表 中 先 使 用 星 号 (CSS 中 * 表 示 所 有 对 象 ) 清除 默认 的 内 边 距 和 外 边 距 ,然后 设置 body 
的 尺寸 ,为 了 让 header 居中 显示 ， 需 要 设置 上 、 下 外 边 距 为 0， 左 、 右 外 边 距 为 auto， 同时 设置 整 
个 页 面 默认 字体 的 大 小 。 相 关 代码 如 下 : 
2 
margin: 07 
padding: 0; 


3 

body { 
height: 800px; 
width: 962px; 
margin: 0 auto; 
font-size: 12px; 

了 


25.1.1 header 元 素 中 的 内 容 


我 们 为 header 准备 了 一 张 背 景 图 片 ， 使 用 background-image 属性 为 其 设置 背景 ， 并 让 背景 在 
水 平方 向 上 重复 ， 同 时 设置 header 的 高 度 为 120 个 像素 。 相 关 代 码 如 下 : 
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header { 
height: 120px; 
background-image: url (bg.jpg); 
background-repeat: repeat-—x; 

} 


在 上 面 的 代码 中 ， 我 们 已 经 使 用 <img> 元 素 插 入 了 公司 的 Logo 图 片 。 为 了 让 Logo 图 片 显 示 
在 header 的 左边 ， 中 /英文 语言 切换 链接 显示 在 右边 ， 需 要 设置 <img> 向 左 浮动 ， 元 eader ul 向 右 浮 
动 , 并 且 吉 eader ul 与 右边 保持 一 定 的 距离 。 另 外 , 为 了 让 链接 垂直 居中 显示 ， 需 要 设置 line-height 
的 高 度 与 Logo 图 片 的 高 度 相同 。 相 关 代码 如 下 : 
header img { 
float: left; 
» 
#header ul { 
float: right; 
padding-right: 20px; 
line-height:80px; 
上 


为 了 让 列表 中 的 列表 项 水 平 显示 ， 我 们 需要 清除 <li> 元 素 中 list-style 属性 的 默认 值 ， 并 让 其 向 
左 浮动 。 列 表 项 的 内 容 与 竖 线 之 间 需 要 有 一 定 的 间距 ， 通 过 <span> 元 素 的 左 、 右 内 边 距 就 可 以 进行 
设置 ， 最 后 清除 超 链接 的 下 画 线 。 相 关 代码 如 下 : 


#header ul 1i { 
list-style: none; 
float: left; 
color: #3A708E; 

} 

#header ul li span { 
padding-left: 1l0px; 
padding-right: 10px; 

} 

#header ul li span a { 
color: #3A708E; 
text-decoration: none; 


上 
此 时 ，header 元 素 中 的 公司 Logo 和 中 /英文 语言 切换 超 链接 效果 就 完成 了 ， 如 下 图 所 示 。 


[EP 
€ 3 @ 0 localhost/23/23.1.htmi 


接 下 来 我 们 设置 导航 条 的 样式 。 值 得 注意 的 是 ， 这 里 我 们 使 用 了 clear 属性 ， 用 于 清除 之 前 的 
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浮动 设置 ,不 让 它 影响 到 导航 条 的 效果 。 另 外 ,我 们 同样 为 导航 条 准备 了 一 张 背景 图 片 ， 并 让 它 在 
水 平方 向 上 重复 。border-radius 属性 用 于 设置 导航 条 的 圆 角 效果 , 其 他 的 样式 设置 与 前 面 的 中 /英文 
语言 超 链接 基本 类 似 。 相 关 代码 如 下 : 


#header nav { 


} 


clear: both; 

height: 40px; 

border-radius: lO0px lO0px 0 0; 
background-image: urll(copyl de.gif); 
background-repeat: repeat-x; 


#header nav lif{ 


} 


list-style: none; 
float: left; 
text-align: center; 
width: 100px; 
line-height: 40px; 


#header nav li a { 


} 


text-decoration: none; 
color: white; 


接 下 来 我 们 为 导航 条 做 一 些 效果 设置 。 首 先是 鼠标 悬 停 的 效果 ， 使 用 opacity 属性 设置 当 鼠 标 
甚 停 在 列表 项 上 时 ， 改 变 其 透明 度 为 0.7， 并 设置 新 的 背景 色 。 而 对 于 第 一 个 列表 项 ， 我 们 将 其 视 
为 一 个 占 位 符 , 为 了 不 影响 导航 条 的 圆 角 效果 ， 使 用 :first-child 选择 器 设置 其 宽度 为 20 个 像素 ， 并 
在 鼠标 悬 停 时 清除 背景 色 。 相 关 代 码 如 下 : 


#header nav li:hover{ 


} 


opacity: O07 
background-color: #EF090D; 


#header nav li:first-child{ 


} 


width: 20px; 


#header nav #not item:hovert{ 


} 


background-color:transparent; 


至 此 ，header 元 素 中 的 内 容 及 样式 设置 就 完成 了 ， 效 果 如 下 图 所 示 。 
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25.1.2 aside 元 素 中 的 内 容 


aside 元 素 中 的 内 容 比较 简单 ， 我 们 使 用 一 个 超 链接 ， 并 在 其 中 用 <img> 元 素 插入 一 张 图 片 即 
可 。 相 关 代 码 如 下 : 


<aside><a href="#"><img src="image3.png"/></a></aside> 


设置 aside 元 素 的 尺寸 并 让 其 向 左 浮动 ， 与 header 保持 5 个 像素 的 外 边 距 , 设置 一 个 背景 色 即 
可 。 相 关 代 码 如 下 : 


aside { 
height: 600px; 
width: 215px; 
float: left; 
margin-top: Spx; 
background-color: #FOEBEF; 


} 
刷新 页 面 后 ， 效 果 如 下 图 所 示 。 


25.1.3 ”section 元 素 中 的 内 容 


section 元 素 中 的 内 容 可 以 分 为 两 个 div 区 域 ， 上 面 的 div 中 是 两 张 图 片 ， 其 中 一 张 是 flash 图 
片 ， 需 要 用 <object> 元 素 插 入 图 片 。 相 关 代 码 如 下 : 


<section> 
<div id="section top"><a href="#"><img src="img contact.jpg"/></a> 
<object classid="clsid:D27CDB6E-RAE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash 
.cab#version=6,0,29,0" 
width="214" height="206"> 


<param name="movie" value="w]l .swf"> 
<param name="quality" value="high"> 
<param name="menu" value="false"> 
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<embed src="wl.swf"” quality="high" pluginspage= 
"http://www.macromedia.com/go/getflashplayer" type="application/ 
x-shockwave-flash" width="214" height="206"> 
</object> 
</div> 


</section> 


其 样式 也 比较 简单 ， 分 别 设置 其 向 左右 浮动 即 可 。 相 关 代码 如 下 : 
section { 
height: 600px; 
width: 742px; 
float: left; 
margin: Spx 0 0 Spx; 
background-color: #F5F8FB; 
} 
#section top img { 
float: left; 
} 
#section top object { 
float: right; 
} 


刷新 页 面 后 ， 效 果 如 下 图 所 示 。 


section 中 第 二 个 <div> 元 素 用 于 显示 新 闻 列 表 ， 我 们 同样 用 列表 来 展示 这 些 信息 。 相 关 代码 如 下 : 
<div id="section content"> 
<h1> 新 闻 动 态 </h1> 
<hr> 
<ul id="section ul"> 
<li><span id="title"> 信 息 标 题 </span><span id="pubdate"> 发 布 时 间 </span> 
/> 
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<1i><a href="#"> 我 司 获 中 国人 民 解 放 军 总 装备 部 ， 中 华人 民 共 和 国 公安 部 用 品 定 点 生产 企 
业 认定 </a><span>2014-11-20</span></1i> 

<1i><a href=-"#"> 国 务 院 参事 、 全 国 工商 联 副 主 席 林 裔 夫 先 生 ， 汤 敏 博士 一 行 到 访 我 司 
</a><span>2014-11-18</span></1i> 

<1i><a href="#"> 嘉 峻 -团队 合作 与 执行 及 自我 激励 拓展 培训 
</a><span>2012-01-06</span></1i> 

<1i><a href="#">110TH 广交会 </a><span>2011-11-10</span></1i> 

<1i><a href="#">2011 年 德国 杜 塞 尔 多 夫 工业 安全 及 劳保 用 品 博览 会 
</a><span>2011-11-10</span></1i> 

<1i><a href="#"> 广 东 脾 桂 园 学 校 双 语 部 小 学 五 (四 ) 班 全 体 师 生 为 临 参观 
</a><span>2011-11-10</span></1i> 

<1i><a href="#">109 届 广 交会 </a><span>2011-05-05</span></1i> 

<1i><a href="#"> 嘉 峻 制 衣 新 装修 的 展厅 已 正式 投入 使 用 
</a><span>2011-05-05</span></1i> 

<li><a href="#"> 户 外 营销 培训 </a><span>2011-01-05</span></1i> 

<1i><a href="#"> 公 司 举办 的 亲子 游 </a><span>2011-01-05</span></1i> 

<li><a href="#"> 户 外 拓展 </a><span>2010-12-08</span></1i> 

<1i><a href="#"> 嘉 峻 制 胡 有 限 公司 网 站 正式 开通 
</a><span>2010-10-22</span></1i> 

</ul> 
</div> 


这 里 新 闻 列表 的 样式 设置 稍微 复杂 一 些 。 首 先 清除 前 面 浮动 元 素 对 当前 列表 元 素 的 影响 ， 然 
后 设置 列表 的 一 些 基本 样式 。 对 于 列表 中 第 一 个 作为 信息 标题 和 发 布 时 间 的 列表 项 , 我 们 希望 它们 
与 其 他 的 列表 项 在 垂直 方向 上 保持 一 致 , 还 需要 在 背景 色 上 有 所 区 别 , 所 以 为 其 设置 背景 色 时 使 用 
了 !important 属性 ， 其 目的 是 为 了 通过 隔行 换 色 设置 其 他 列表 项 的 背景 色 时 ， 不 会 影响 它们 的 背景 
色 。 另 外 ， 所 有 信息 标题 的 超 链接 页 面 都 通过 :before 选择 器 插入 了 一 个 小 图 标 ， 而 且 所 有 显示 发 
布 日 期 的 <span> 元 素 都 在 垂直 方向 上 保持 一 致 。 相 关 代码 如 下 : 


#section content { 
clear: both; 

} 

#section content hl { 
padding: Spx 0 Spx 10px7 

未 

#section content hr { 
margin-left: 5px; 
border: lpx solid #3A708E; 
width: 727px; 

} 

#section ul { 
margin-top: 1l0px; 
margin-left: 35px; 
list-style: none; 
width: 670px; 
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} 

#section ul li { 
line-height: 25px; 
margin-top: 2px; 

. 

#section ul 1i #title { 
display: inline-block; 
width: 568px; 
padding-left: 20px; 
text-align: left; 
font-size: 14px; 
font-weight: bold; 
background-color: #E6E6E6 !important; 

} 

#section ul li #pubdate { 
display: inline-block; 
margin-left: 2px; 
width: 80px; 
text-align: center; 
font-size: 14px; 
font-weight: bold; 
background-color: #E6E6E6; !important; 

} 

#section ul lia { 
display: inline-block; 
width: 588px; 
text-align: left; 
text-decoration: none; 
color: #3A708E; 

3 

#section ul li a:hover { 
text-decoration: underline; 
color: #B71517; 

} 

#section ul li a:before { 
content: url(icon03.gif); 
margin-left: 10px; 
margin-right: 10px; 

是 

#section ul 1i span:nth-child(2) { 
display: inline-block; 
width: 80px; 
text align centers 
margin-left: 2px; 
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#section ul li:nth-child(odd) { 
background-color: #F3F3F3; 

. 

#section ul li:nth-child(even) { 
background-color: white; 


} 
刷新 页 面 后 ， 效 果 如 下 图 所 示 。 


25.1.4 ”footer 元 素 中 的 内 容 


footer 元 素 中 的 内 容 也 通过 两 个 <div> 元 素 分 成 上 下 两 部 分 。 第 一 个 <div> 元 素 用 于 显示 底部 的 
导航 条 ， 该 导航 条 与 header 中 的 导航 条 内 容 相同 ， 但 是 显示 效果 不 同 。 第 二 个 <div> 元 素 用 于 显示 
公司 的 Logo 图 片 以 及 版 权 、 联 系 方式 等 信息 。 相 关 代码 如 下 : 


<footer> 
<div> 
<ul id="footer nav"> 
<1i><a href="#"> 首 页 </a>|</1i> 
<1i><a href="#"> 关 于 嘉 峻 </a>1</1i> 
<li><a href="#"> 产 品 </a>1</1i> 
<li><a href="#"> 品 牌 </a>1</1i> 
<1i><a href="#"> 权 威 认 证 </a>1</1i> 
<1i><a href="#"> 新 闻 动 态 </a>1</1i> 
<1i><a href="#"> 合 作 伙 伴 </a>1</1i> 
<1i><a href="#"> 人 才 招 聘 </a>1</1i> 
<li><a href="#"> 联 系 我 们 </a></1i> 
</ul> 
</div> 
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<div id="footer bottom"> 
<img src="index2.jpg"/> 
<div> Copyright © 2009 kachun.com.cn. All Rights 
Reserved<br> 
<span>E-mail:info@kachun.com.cn 电话 :+86-757-23331223 23356929 
</span> 
</div> 
</footer> 


首先 设置 footer 的 高 度 ， 并 清除 之 前 浮动 效果 对 当前 元 素 的 影响 。 底 端 导航 条 样式 的 设置 与 
header 中 导航 条 样式 的 设置 基本 相同 , 但 为 了 让 其 靠 右 显示 ,这 里 采用 设置 内 边 距 的 方式 。 而 对 于 
公司 Logo 和 版 权 的 样式 设置 ,同样 使 用 了 浮动 效果 , 让 其 与 图 片 显示 在 一 行 , 并 通过 设置 外 边 距 ， 
让 版 权 和 联系 方式 与 图 片 保持 一 定 的 距离 。 相 关 代码 如 下 : 


footer { 
height: 40px; 
二 

} 

#footer nav { 
height: 40px; 
padding-left: 400px; 
border-radius: 10px; 
background-image: urll(copyl de.gif); 
background-repeat: repeat-x; 

} 

#footer nav li { 
list-style: none; 
float: left; 
color: white; 
text-align: center; 
line-height: 40px; 

} 

#footer nav li:hover { 
text-decoration: underline; 

ly 

#footer nav li a { 
text-decoration: none; 
color: white; 
padding-left: Spx; 
padding-right: Spx; 

} 

#footer bottom { 
text-align: left; 
height: 62px; 

|， 

#footer bottom img { 
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display: inline-block; 
margin-top: 15px; 
margin-left: 20px; 
margin-right: 10px; 
float: left; 

. 

#footer bottom div { 
float: left; 
display: inline; 
margin-top: 15px; 
color: #3A708E 

} 


至 此 ， 企 业 门 户 网 站 的 案例 就 制作 完成 了 。 刷 新 页 面 后， 效果 如 下 图 所 示 。 


AMNs::s, 


ALT me py 


25.2 ”项目 实战 案例 二 : 用 户 管理 


HTML5 和 CSS3 不 仅 可 以 制作 各 种 风格 特效 的 网 站 , 还 可 以 用 来 开发 Web 应 用 程序 , 而 且 这 
个 趋势 近 几 年 越 来 越 明显 ， 很 多 C/S 架构 的 应 用 程序 都 在 向 B/S 架构 迁移 ， 这 也 是 为 什么 HTML5 
和 CSS3 这 么 流行 的 重要 原因 。 

本 节 我 们 以 Web 应 用 程序 中 常见 的 用 户 管理 界面 为 例 , 为 大 家 演示 如 何 使 用 HIML5 和 CSS3 
制作 Web 应 用 程序 。 由 于 一 般 的 Web 应 用 程序 都 会 有 很 多 界面 , 而 我 们 篇 幅 有 限 , 为 了 演示 方便 ， 
我 们 将 用 户 新 增 、 编 辑 、 删 除 和 列表 显示 在 一 个 页 面 上 ， 效 果 如 下 图 所 示 。 


新 增 用 户 和 编辑 用 户 都 需要 填写 用 户 信息 ， 而 且 这 两 个 界面 中 的 元 素 基 本 相同 ， 通 常 都 会 共 
用 一 个 界面 ， 通 过 单 击 不 同 的 按钮 ， 执 行 新 增 或 编辑 操作 。 无 论 是 新 增 用 户 还 是 编辑 用 户 ， 用 户 的 
某 些 信息 都 是 必 填 的 ， 在 这 些 信息 的 标签 前 面 一 般 都 会 标注 一 个 红色 的 星 号 。 执 行 操作 之 前 ， 如 果 
这 些 必 填 项 中 有 某 项 没有 填写 ， 那 么 需要 在 界面 中 给 出 提示 ， 这 里 我 们 采用 了 一 个 隐藏 的 <div> 元 
素 显示 提示 信息 。 

用 户 列 表 我 们 采用 table 布局 ,除了 table 的 表 头 外 ， 数 据 行 均 只 显示 底 边 框 ， 并 当 鼠 标 悬 停 在 
数据 行 上 时 更 改 数据 行 的 背景 色 。 每 个 数据 行 的 第 一 列 是 一 个 复 选 框 , 通过 选中 该 复 选 框 可 以 确定 
用 户 需 要 对 哪 条 数据 进行 编辑 或 删除 操作 。 有 关 本 例 中 的 HTML 代码 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 用 户 管理 </title> 

<link rel="stylesheet" type="text/css" href="25.2.css"/> 

<script src="25.2.js" type="text/javascript"></script> 

</head> 

<body> 

<div> 

<h1> 用 户 管理 </h1> 
<div id="edit user"> 
<input type="hidden" id="editUserId" value=""/> 
<table> 
REE 
<td colspan="4" id="error text" style="text-align:left"></td> 
</tr> 
<tr> 
<td class="mustitem"> 登 录 名 </td> 
<td><input type="text" name="user login name" id="user login name" /> 
</td> 
<td> 手 机 号 码 </td> 
<td><input type="tel" name="user phone" id="user phone"/></td> 
</tr> 
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E> 
<td class="mustitem"> 用 户 名 </td> 
<td><input type="text" name="user name" id="user name" /></td> 
<td> 邮 箱 地 址 </td> 
<td><input type="email" name="user email" id="user email"/></td> 
</tr> 
<tr> 
<td class="mustitem"> 密 码 </td> 
<td><input type="password" name="user password" id="user password" /> 
</td> 
<td> 角 色 </td> 
<td><select name="user role" id="user role"> 
<option value="1"> 普 通用 户 </option> 
<option value="2"> 管 理 员 </option> 
</select></td> 
</tr> 
<tr> 
<td class="mustitem"> 确 认 密 码 </td> 
<td><input type="password" name="user confirm password" 
id="user confirm password" /></td> 
<td> 用 户 状态 </td> 
<td><select name="user state" id="user state"> 
<option value="1"> 正 常 </option> 
<option value="2"> 停 用 </option> 
</select></td> 
</tr> 
<tr id="btns"> 
<td colspan="4"><input type="button" name="btn save" 
onClick="btn_save () ;"” value=" 确 定 ” /> 
<input type="button" name="btn hide” value=" 取 消 " 
‘onClick="btn hide();" /></td> 
</tr> 
</table> 
</div> 
</div> 
<div id="menu"> <span id="add" onClick="btn_show();"> 新 建 </span> <span 
id="edit"” onClick="btn edit () ;"> 编 辑 </span> <span id="delete" 
onClick="btn_dqel () ; "> 删除 </span> </div> 
<div> 
<table cellspacing="0"> 
<thead id="t title"> 
tr 
<th id="chkall"><input type="checkbox" name="chk al1” /></th> 
<th id="user_id"> 用 户 编号 </th> 
<th id="user login name"> 登 录 名 </th> 
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<th id="user_name"> 用 户 名 </th> 
<th id="user _ role"> 角 色 </th> 
<th id="user phone"> 手 机 号 码 </th> 
<th id="user_email"> 邮 箱 地 址 </th> 
<th id="user state"> 用 户 状态 </th> 
</tr> 
</thead> 
<tbody id="t body"> 
</tbody> 
</table> 
</div> 
</body> 
</html> 


本 例 中 的 所 有 样式 代码 都 在 外 部 样式 表 中 ， 通 过 在 HTML 中 引入 外 部 样式 表 使 用 这 些 样式 。 
在 设置 样式 时 , 使 用 了 多 种 选择 器 , 例如 在 新 建 用 户 的 必 填 项 标签 前 使 用 E:before 选择 器 插入 星 号 
并 设置 颜色 ; 在 排版 新 建 界面 元 素 时 ,使 用 E:nth-child 选择 器 设置 标签 文字 对 齐 ; 在 制作 按钮 时 使 
用 : hover 和 : active 伪 类 选择 器 ， 让 普通 的 文字 在 鼠标 悬 停 和 按 下 时 更 有 按钮 效果 。 本 例 中 的 CSS 
样式 代码 如 下 : 
i! 
margin: 07 
padding: Opx; 
} 


body { 
background-color: #EBEBEB; 


BT 
color: white; 
background-color: #165175; 
width: 150px; 
text-align: center; 
margin: 10px 40px; 
padding: 5px 0; 
border-radius: 5px; 
float: left; 

} 

#menu { 
clear: both; 
margin-left: 40px; 
margin-bottom: 10px; 

a 

#add, #edit, #delete { 
color: white; 
background-color: #52AC3D; 
text-align: center; 
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padding: 3px 15px7 
border: lpx solid 


#2F862B; 


border-radius: 5px; 


} 

#add:hover, #edit:hover, 
border: lpx solid 

} 

#add:active, #edit:active, 
background-color: 

} 

table { 
margin-left: 40px; 
color: #999999; 
font-size: 12px; 
text-align: left; 

} 


LE 
background-color: 
height: 25px; 

} 

Te tr Ea 
padding: 2px Spx; 

} 

#chkall { 
min-width: 30px; 

} 

#user id { 
min-width: 100px; 

} 

#user login name { 
min-width: 200px; 

} 

#user name { 
min-width: 200px; 

} 

#user password { 
min-width: 100px; 

} 

#user role { 
min-width: 80px; 

} 

#user phone { 
min-width: 100px; 

} 

#user email { 
min-width: 200px; 


#146700; 


#429D2C; 


#09142B; 


#delete:hover { 


#delete:active { 
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} 

#user state { 
min-width: 60px; 

= 

#t body tr { 
height: 40px; 

} 

#t body tr:hover { 

background-color: white; 

} 

#t body tr td { 

padding: 2px 5px; 
border-bottom: lpx solid #09142B; 

} 

#edit user { 

display: none; 
margin-top: 10px; 
margin-left: 400px; 

} 

#edit user table tr td:nth-child(odd) { 

text-align: right; 
font-weight: bold; 
padding-right: Spx; 

} 

#edit user table tr td input[type="text"], #edit user table tr td 
input [type="password"], #edit user table tr td input[type="tel"], #edit user 
table tr td input[type="email"], #edit user table tr td select { 

width: 200px; 
height: 20px; 
color: #999999; 
font-size: 12px; 
} 
.mustitem:before { 
content: "*"; 
color: red; 
padding-right: Spx; 
} 
#btns td input { 
Width: 7TS5px;? 
height: 25px; 
color: white; 
background-color: #52AC3D; 
border: lpx solid #2F862B; 
border-radius: Spx; 
margin: 0 10px; 
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#btns td input:hover { 


border: lpx solid #146700; 


} 
#btns td inp 


ut:active { 


background-color: #429D2C; 


+» 


为 了 在 演示 中 使 用 动态 数据 ， 我 们 使 用 Web SQL API 将 所 有 的 数据 都 存储 在 本 地 数据 库 ， 而 
执行 这 些 操作 的 所 有 JavaScript 代码 都 在 外 部 js 文件 中 。 首 先 在 页 面 加 载 时 ， 通 过 调用 openDb0 
函数 创建 一 个 本 地 数据 库 和 数据 表 ， 同 时 调用 loadUserInfo0 函 数 加 载 所 有 数据 项 。 当 然 ， 初 次 加 
载 页面 时 还 没有 任何 数据 ， 所 以 在 单 击 “ 新 增 ”按钮 时 调用 bn_show0 函 数 显示 隐藏 的 用 户 信息 编 
辑 界面 ， 填 写 完 所 有 用 户 信息 后 ， 单 击 “ 确 定 ”按钮 保存 信息 ， 这 时 会 调用 btn_save0 函 数 将 用 户 
信息 保存 在 本 地 数据 库 中 。 在 这 个 操作 过 程 中 ,因为 新 建 用 户 和 编辑 用 户 共用 一 个 界面 ， 所 以 需要 
通过 隐藏 域 判断 当前 用 户 执行 的 是 新 增 操作 还 是 编辑 操作 ,以 便 执 行 相关 的 函数 。 当 选中 数据 行 前 
面 的 复 选 框 时 ， 会 通过 btn_edit0 函 数 检索 当前 用 户 选中 的 是 哪 条 数据 ， 并 将 选中 的 数据 赋值 到 编 
辑 界面 ， 以 便 用 户 进行 编辑 和 删除 操作 。 本 例 中 完整 的 JavaScript 代码 如 下 : 


var db; / /数据 库 连 接 
window.onload=function (){ // 加 载 用 户 信息 
openDb () 7 
loadUserInfo () 
} 
function openDb(){ // 打 开 数 据 库 连接 
db = openDatabase ("UserInfo", "2.0", "mydb", 5*1024 * 1024) 7 
if(!db){ 
alert ("创建 数据 库 失 败 ! ") 7 
}elsef{ 


createTable (db); 


} 
? 


function createTable (db){ / /创建 表 
db.transaction (function (tx) { 
txX .executeSql ("create table if not exists TUser (userId UNIQUE, 
userLoginName TEXT,userPhone TEXT,userName TEXT,userEmail TEXT,userPass TEXT, 


userRole TEXT,us 
function( 
function( 
); 
Ds; 
} 


erConfirmPassword TEXT,uUserState TEXT)", [], 
tx, result){ }, 
tx，error) { alert ("创建 表 tUser 失败 :" + error.message);} 


function loadUserInfo(){ // 加 载 数据 
// 先 删除 所 有 table 行 
Var tbody=document .getElementById("t body"); 
Var rowNum=tbody .rows.length; 


for (var i=0;i<rowNum;i++){ 
tbody.deleteRow(i) 7 
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TOWNum=rowNum-17 


-1; 
} 


// 再 添加 所 有 数据 


Var sql="select * from TUser™"; 


var data=[]; 


db.transaction (function (tx) 


{ 


tx.executesql (sql,data, 


function (tx, result) 


{ 


for (var i=0;i<result.rows.length;i++) 


£ 
var 
Var 
Var 
Var 
Var 
Var 
Var 
Var 
Var 


tr= qdqocument .createElement ("tr"); 

td_chk= document .createElement ("td"); 
td_userId= document.createElement ("td"); 

td userLoginName= document .createElement ("td"); 
td userName= document.createElement ("td"); 

td userRole= document.createElement ("td"); 

td userPhone= document.createElement ("td"); 

td userEmail= document.createElement ("td"); 

td userstate= document.createElement ("td"); 


tq chk.innerHTML="<input type='checkbox' name='chk user' 
onClick="'btn edit();'/>"; 
td userId.innerHTML=result.rows.item(i) .userId; 


td userLoginName.innerHTML=result.rows.item(i) .userLoginName; 


td userName.innerHTML=result.rows.item(i).userName; 
td userRole.innerHTML=result .rows.item(i) .userRole==1?" 普 通用 


户 ":" 管 理 员 "; 


td userPhone.innerHTML=result.rows.item(i).userPhone; 
td userEmail.innerHTML=result.rows.item(i) .userEmail; 
td userState.innerHTML=result .rows.item(i) .userState==1?" 正 常 


tr.appendchild (td_ chk); 
tr.appendchild (td userId); 
tr.appendChild (td userLoginName); 
tr.appendChild (td userName); 
tr.appendchild (td userRole); 
tr.appendChild (td userPhone); 
tr.appendchild (td userEmail); 
tr.appendChild (td userstate); 
tbody.appendChild (tr); 


}, 


function (tx,error) {alert ("数据 查询 失败 : "+error.message)}); 
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Ds; 


} 

function btn show(){ // 显 示 新 增 界面 
document .getElementById("edit user").style.display="block"; 

} 

function btn hide (){ // 隐 藏 编辑 界面 
document .getElementById("user login name") .value=""; 
document .getElementById ("user phone") .value=""; 
document .getElementById ("user name") .value=""; 
document .getElementById ("user email") .value= 
document .getElementById ("user password") .value= 
document .getElementById ("user role") .selectedIndex=07 
document .getElementById ("user confirm password") .value=""; 
document .getElementById ("user state") .selectedIndex=0; 
document .getElementById ("error text").innerHTML= 
document .getElementById ("editUserId") .value=""; 
document .getElementById("edit user").style.display="none"; 


} 
function btn save(){ // 新 增 /编辑 用 户 信息 
Var userCount=0; 
Var sql="select * from TUser"; 
var data=[]; 
db.transaction (function (tx) 
i 
tx.executesql (sql, data, 
function (tx, result) 
{ 
Var userId=document .getElementById("editUserId") .value; 
var userLoginName=document .getElementById 
("user login name") .value; 
Var userPhone=document .getElementById ("user phone") .value; 
Var userName=document .getElementById("user name") .value; 
Var userEmail=document .getElementById ("user email") .value; 
Var userPass=document .getElementById ("user password") .value; 
Var userRole=document .getElementById("user role"); 
Var UserConfirmPassword=document .getElementById 
("user confirm password") .value; 
Var userState=document .getElementById ("user state"); 
var user={ 
userId:userCount, 
userLoginName:userLoginName, 
userPhone:userPhone, 
userName:userName, 
userEmail:userEmail, 
userPass:userPass, 
userRole:userRole.options[userRole.selectedIndex] .value, 
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UserConfirmPassword:userConfirmPassword， 
userState:userState .options[userState.selectedIndex] .value 
}; 
if(check (user)){ // 校 验 数 据 
if (document .getElementById ("editUserId") .value!=""){ 
user.userId=parseInt (document .getElementById 
("editUserId") .value); 
updateData (db, user); 
}else{ 
user.userId=result.rows.length+1; 
insertData (db,user); 


}, 
function (tx,error) {alert ("数据 查询 失败 ; "+error .message)}); 
D); 
} 
function check(user){ // 数 据 校 验 
if(user.userLoginName==null || user.userLoginName==""){ 
document .getElementById ("error text") .innerHTML="<span 
style='color:red;font-size:12px; ' > 请 填写 登录 名 。</span>"; 
return false; 
} 
if(user.userName==null || user.userName==""){ 
document .getElementById ("error text").innerHTML="<span 
style='color:red;font-size:12px; '> 请 填写 用 户 名 。</span>"; 
return false; 
} 
if(user.userPass==null || user.userPass==""){ 
document .getElementById("error text").innerHTML="<span 
style='color:red;font-size:12px; "> 请 填写 密码 。</span>"7 
return false; 
} 
if(user.userConfirmPassword==null || user.userConfirmPpassword= 
document .getElementById("error text").innerHTML="<span 
style='color:red;font-size:12px; '> 请 填写 确认 密码 。</span>"; 
return false; 


ot 


} 
if(user.userPass!=user.userConfirmPassword){ 
document .getElementById ("error text").innerHTML="<span style= 
'color:red;font-size:12px; '> 两 次 输入 密码 不 一 致 。</span>"; 
return false; 
} 
return true; 
} 
function insertData (db,user){ // 写 入 数据 
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Var sql="insert into TUser(userId ,userLoginName , userName ，UserPass ， 
userConfirmPpassword , userPhone , userEmail , userRole ,userState ) 
Gl ee ee ek 
var data=[user.userId,user.userLoginName,user.userName,user.userPass, 
user.userConfirmPpassword,user.userPhone,user.userEmail,user.userRole, 
user.userstate]; 
db.transaction (function (tx){ 
tx.executesql (sql, data, 
function (tx, result) {btn hide();loadUserInfo();}, 
// 数 据 保存 成 功 后 重新 加 载 数 据 
function (tx,error) {alert ("数据 添加 失败 : "+error.message)}); 
]) 
} 
function updateData (db,user){ // 修 改 数据 
var sql="update TUser set userLoginName=?, userName=? , userPass=? ， 
userConfirmPassword=? , userPhone=? , userEmail=? , userRole=? ,userState=? where 
userId=?"; 
var data=[ 
user.userLoginName, user .userName, user.userPass, 
user.userConfirmPpassword,user.userPhone,user.userEmail,user.userRole, 
user.userState, user.userId 
]; 
db.transaction (function (tx) 
{ 
tx.executesql (sql,data, 
function (tx, result) {btn hide();loadUserInfo();}, 
// 数 据 修改 成 功 后 重新 加 载 数 据 
function (tx,error) {alert ("数据 修改 失败 : "+error.message) })7 
D3; 


} 


function btn edit(){ // 编 辑 用 户 信息 
Var count=0; 
var selectedRow; // 当 前 选中 的 行 


var t body=document .getElementById("t body"); 
for (var i=0;i<t body.rows.length;i++){ 
if(t body.rows[i].cells[0] .children[0] .checked){ 
selectedRow=t_ body.rows([i]; 
Count++; 


} 
if(selectedRow==null){ 


alert ("请 选择 需要 编辑 的 数据 ! "); 
return; 

} 

if(count>=2){ 


alert ("只 能 编辑 一 行 数据 ! "); 
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return; 
} 
btn show(); 
document .getElementById ("editUserId") .value=selectedRow.cells[1]. 
innerText; 
document .getElementById ("user login name") .value=selectedRow.cells[2]. 
innerText; 
document .getElementById ("user name") .value=selectedRow.cells[3]. 
innerText; 
document .getElementById ("user role").selectedIndex= 
selectedRow.cells[4] .innerText==" 普 通用 户 "?0:1; 
document .getElementById ("user phone") .value=selectedRow.cells[5]. 
innerText; 
document .getElementById ("user email") .value=selectedRow.cells[6]. 
innerText; 
document .getElementById ("user state") .SelectedIndex= 
selectedRow.cells[7] .innerText==" 正 常 "?0:1; 
} 
function btn dell(){ // 删 除 用 户 信息 


var selectedRow; // 所 有 选中 的 行 
Var t body=document .getElementById("t body"); 
for (Var i=0;i<t body.rows.length;i++){ 
if(t body.rows[i].cells[0] .children[0] .checked){ 
selectedRow=t body.rows [i]7 


} 
if(selectedRow==null){ 
alert ("请 选择 要 删除 的 数据 ! ") ; 
return; 
} 
Var UserId=parseInt (selectedRow.cells[1] .innerText); 
deleteData (db, userId); 
有 
function deleteData(db,userId) 1{ 
var sql="delete from TUser where userId=?"; 
Var data=[userId]; 
db.transaction (function (tx) 
{ 
tx.executeSsql (sql, data, 
function (tx, result) {btn hide();loadUserInfo(); 
console.log(result)}, 
function (tx,error) {alert ("数据 删除 失败 : "+error.message)}); 
]) 


